PX转REM简易计算器（适用于fittext.js插件计算）

当你使用fittext.js插件时，通过量取的像素单位PX计算出REM单位值，是一件比较麻烦而繁琐的，为了提高工作效率，自己闲暇写了个小DEMO，现在给大家分享出来。

先看dom：

 <header>

     <input type="text" class="fat" placeholder="PX值">

 </header>

 <div class="box">

     <p>8.88888</p>

     <ul></ul>

 </div>

 <footer>

     <input type="text" class="son" placeholder="比值">

 </footer>

重点js：

<script src="http://apps.bdimg.com/libs/jquery/2.1.2/jquery.min.js"></script>

<script>

$(function(){

$(document).keypress(function (e) {

if (e.keyCode == 13){

var a=$(".fat").val();

var b=$(".son").val();

$(".box p").text(accDiv(a,b).toFixed(5));

$(".fat").val("");

$(".box ul").append('<li><span>'+a+'</span>px:<b>'+accDiv(a,b).toFixed(5)+'</b></li>')

}

})

});

function accDiv(arg1, arg2) {

var t1 = 0, t2 = 0, r1, r2;

try {

t1 = arg1.toString().split(".")[1].length;

}

catch (e) {

}

try {

t2 = arg2.toString().split(".")[1].length;

}

catch (e) {

}

with (Math) {

r1 = Number(arg1.toString().replace(".", ""));

r2 = Number(arg2.toString().replace(".", ""));

return (r1 / r2) * pow(10, t2 - t1);

}

}

</script>

最后是css：

 <style>

 *{margin:;padding:;}

 body{

 background: gray;

 }

 header{

 width: 100%;

 background: #000;

 height: 100px;

 overflow: hidden;

 }

 header input{

 width: 300px;

 height: 50px;

 text-align: center;

 margin: 25px auto;

 display: block;

 font-size: 40px;

 border:;

 outline: none;

 }

 .box{

 width: 100%;

 height: 800px;

 }

 .box p{

 width: 100%;

 height: 200px;

 line-height: 200px;

 text-align: center;

 font-size: 120px;

 border-bottom:2px dashed green;

 }

 .box ul li{

 width: 200px;

 height: 30px;

 float: left;

 line-height: 30px;

 background: #444;

 color: #fff;

 margin: 5px 5px;

 overflow: hidden;

 list-style: none;

 font-size: 24px;

 }

 .box ul li span{

 color: red;

 width: 60px;

 height: 30px;

 line-height: 30px;

 text-align: center;

 display: inline-block;

 float: left;

 }

 .box ul li b{

 float: right;

 width: 100px;

 height: 30px;

 line-height: 30px;

 text-align: center;

 display: inline-block;

 color: #000;

 font-weight: normal;

 list-style: none;

 }

 footer{

 width: 100%;

 height: 100px;

 position: fixed;

 bottom:;

 background: #000;

 }

 footer input{

 width: 300px;

 height: 50px;

 text-align: center;

 margin: 25px auto;

 display: block;

 font-size: 40px;

 border:;

 outline: none;

 }

 </style>

本文系博主原创，转载请注明出处！

巴特西

PX转REM简易计算器（适用于fittext.js插件计算）

最新文章

热门文章