今天给大家分享下如何用JS写一个windows简易计算器，虽然电脑上都自带计算器，不过我们自己写一个简单的计算器实例，不仅可以用起来更方便，还可以提升写代码的乐趣，何乐而不为呢！
写的这个计算器是很简易的，没有小数，没有函数高级算数之类的，只是帮助大家提升兴趣，先看一下效果图：
下面给出HTML代码和CSS布局：
<div id="counter"> <h2>简易计算器 - <a href="http://www.miaov.com"></a> - <a href="http://www.miaov.com">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(images/bg.png); 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(images/ico.png) 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(images/ico.png) no-repeat -303px 0; text-align: center; color: #fff; cursor: pointer; margin: 0 1px 4px 0; }#counter_content .active { background: url(images/ico.png) 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.30000000000000004 0.3-0.1 //0.19999999999999998
所以在编写计算器是应首先解决计算精度问题，以下四个代码段分别是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 = Math.pow(10, Math.max(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 = Math.pow(10, Math.max(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+=s1.split(".")[1].length}catch(e){} try{m+=s2.split(".")[1].length}catch(e){} return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(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(arg1.toString().replace(".", "")); r2 = Number(arg2.toString().replace(".", "")); return (r1 / r2) * pow(10, t2 - t1); }}
下面是完整的JS部分代码：
var sNum1 = '';
var sOpr = '';
var bNeedClear = false; //是否需要清除输入框中已有的内容
function calc(iNum1, iNum2, sOpr) {
var iResult = 0;
switch (sOpr) {
case '×':
iResult = iNum1 * iNum2;
break;
case '+':
iResult = iNum1 + iNum2;
break;
case '-':
iResult = iNum1 - iNum2;
break;
case '÷':
iResult = iNum1 / iNum2;
break;
default:
iResult = iNum2;
}
return iResult;
}
function doInput() {
var oInput = document.getElementById('input1');
var sHtml = this.innerHTML.replace(' ', '');
switch (sHtml) {
case '=':
oInput.value = calc(parseInt(sNum1), parseInt(oInput.value), sOpr);
sNum1 = '';
sOpr = '';
bNeedClear = true;
break;
case '+':
case '-':
case '×':
case '÷':
bNeedClear = true;
if (sNum1.length != 0) {
oInput.value = calc(parseInt(sNum1), parseInt(oInput.value), sOpr);
}
sOpr = sHtml;
sNum1 = oInput.value;
break;
case 'C':
oInput.value = '0';
sNum1 = '';
sOpr = '';
break;
default: //数字
if (bNeedClear) {
oInput.value = parseInt(sHtml, 10);
bNeedClear = false;
} else {
oInput.value = parseInt(oInput.value + sHtml, 10);
}
break;
}
}
window.onload = function() {
var aLi = document.getElementsByTagName('li');
var i = 0;
for (i = 0; i < aLi.length; i++) {
aLi[i].onmousedown = doInput;
aLi[i].onmouseover = function() {
this.className = 'active';
};
aLi[i].onmouseout = function() {
this.className = '';
};
}
};
大家赶紧试试这个小例子吧！
推荐阅读：
本文暂时没有评论，来添加一个吧(●'◡'●)