990033、990033夜明珠ymz01?

今天给大家分享下如何用JS写一个windows简易计算器，虽然电脑上都自带计算器，不过我们自己写一个简单的计算器实例，不仅可以用起来更方便，还可以提升写代码的乐趣，何乐而不为呢！

写的这个计算器是很简易的，没有小数，没有函数高级算数之类的，只是帮助大家提升兴趣，先看一下效果图：

下面给出HTML代码和CSS布局：

<div id="counter"> <h2>简易计算器 - <a href=";></a> - <a href=";>www.miaov.com</a></h2> <div id="counter_content"> <h3><input id="input1" type="text" value="0" /></h3> <ul> <li>7</li> <li>8</li> <li>9</li> <li>+</li> <li>4</li> <li>5</li> <li>6</li> <li>-</li> <li>1</li> <li>2</li> <li>3</li> <li>×</li> <li>0</li> <li>C</li> <li>=</li> <li>÷</li> </ul> </div>

CSS部分：

* { padding: 0; margin: 0; }li { list-style: none; }body { background: #940032; }#counter { width: 500px; height: 420px; background: url(image); margin: 50px auto 0; position: relative; }#counter h2 { line-height: 42px; padding-left: 15px; font-size: 14px; font-family: arial; color: #ff3333; }#counter a { font-weight: normal; text-decoration: none; color: #ff3333; }#counter a:hover { text-decoration: underline; }#bg { width: 280px; height: 200px; border: 3px solid #680023; background: #990033; filter: alpha(opacity=80); opacity: 0.8; position: absolute; left: 50%; top: 115px; margin-left: -141px; }#counter_content { width: 250px; position: absolute; top: 130px; left: 130px; z-index: 1; }#counter_content h3 { margin-bottom: 10px; }#counter_content h3 input { border: none; width: 223px; height: 30px; line-height: 30px; padding: 0 10px; background: url(image) no-repeat; text-align: right; color: #333; font-size: 14px; font-weight: bold; }#counter_content ul { width: 250px; }#counter_content li { width: 60px; height: 30px; line-height: 30px; float: left; background: url(image) no-repeat -303px 0; text-align: center; color: #fff; cursor: pointer; margin: 0 1px 4px 0; }#counter_content .active { background: url(image) no-repeat -243px 0; }#counter p { width: 500px; position: absolute; bottom: 20px; left: 0; color: #ff3333; text-align: center; font-size: 12px; }

在写JS时首先，由于JS的存在数值的精度误差问题：

0.1+0.2 0.3-0.1

所以在编写计算器是应首先解决计算精度问题，以下四个代码段分别是js中精确的加减乘除运算函数：

//浮点数加法运算 function floatAdd(arg1, arg2) { var r1, r2, m; try { r1 = arg1.toString().split(".")[1].length } catch (e) { r1 = 0 } try { r2 = arg2.toString().split(".")[1].length } catch (e) { r2 = 0 } m = Ma(10, Ma(r1, r2)); return (arg1 * m + arg2 * m) / m }

//浮点数减法运算

function floatSub(arg1, arg2) {

var r1, r2, m, n;

try { r1 = arg1.toString().split(".")[1].length } catch (e) { r1 = 0 }

try { r2 = arg2.toString().split(".")[1].length } catch (e) { r2 = 0 }

m = Ma(10, Ma(r1, r2));

//动态控制精度长度

n = (r1 >= r2) ? r1 : r2;

return ((arg1 * m - arg2 * m) / m).toFixed(n);

}

//浮点数乘法运算function floatMul(arg1,arg2){ var m=0,s1=arg1.toString(),s2=arg2.toString(); try{m+=(".")[1].length}catch(e){} try{m+=(".")[1].length}catch(e){} return Number(".",""))*Number(".",""))/Ma(10,m)}

//浮点数除法运算function floatDiv(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().replace(".", "")); r2 = Number().replace(".", "")); return (r1 / r2) * pow(10, t2 - t1); }}

下面是完整的JS部分代码：

大家赶紧试试这个小例子吧！

责任编辑: 鲁达

“990033,990033夜明珠ymz01,990033.夜明珠ymz02,990022夜明珠ymz990033”边界阅读