首先，由于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)
}
}
以下是详细的计算器代码：
HTML5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单计算器</title>
<link href="main.css" rel="stylesheet">
</head>
<body>
<div id="calculator">
<div id="calculator_container">
<h3>计算器</h3>
<table id="calculator_table">
<tbody>
<tr>
<td colspan="5">
<input type="text" id="resultIpt" readonly="readonly" value="" size="17" maxlength="17" style="width:294pxcolor: black">
</td>
</tr>
<tr>
<td><input type="button" value="←" class="btn_color1 btn_operation"></td>
<td><input type="button" value="全清" class="btn_color1 btn_operation"></td>
<td><input type="button" value="清屏" class="btn_color1"></td>
<td><input type="button" value="﹢/﹣" class="btn_color2 btn_operation"></td>
<td><input type="button" value="1/×" class="btn_color2 btn_operation"></td>
</tr>
<tr>
<td><input type="button" value="7" class="btn_color3 btn_number"></td>
<td><input type="button" value="8" class="btn_color3 btn_number"></td>
<td><input type="button" value="9" class="btn_color3 btn_number"></td>
<td><input type="button" value="÷" class="btn_color4 btn_operation"></td>
<td><input type="button" value="％" class="btn_color2 btn_operation"></td>
</tr>
<tr>
<td><input type="button" value="4" class="btn_color3 btn_number"></td>
<td><input type="button" value="5" class="btn_color3 btn_number"></td>
<td><input type="button" value="6" class="btn_color3 btn_number"></td>
<td><input type="button" value="×" class="btn_color4 btn_operation"></td>
<td><input type="button" value="√" class="btn_color2 btn_operation"></td>
</tr>
<tr>
<td><input type="button" value="1" class="btn_color3 btn_number"></td>
<td><input type="button" value="2" class="btn_color3 btn_number"></td>
<td><input type="button" value="3" class="btn_color3 btn_number"></td>
<td><input type="button" value="－" class="btn_color4 btn_operation"></td>
<td rowspan="2">
<input type="button" value="＝" class="btn_color2" style="height: 82px" id="simpleEqu">
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="0" class="btn_color3 btn_number" style="width:112px">
</td>
<td><input type="button" value="." class="btn_color3 btn_number" ></td>
<td><input type="button" value="＋" class="btn_color4 btn_operation"></td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript" src="calculator.js"></script>
</body>
</html>
CSS3
* {
margin: 0
padding: 0
}
#calculator{
position: relative
margin: 50px auto
width: 350px
height: 400px
border: 1px solid gray
-webkit-border-radius: 10px
-moz-border-radius: 10px
border-radius: 10px
-webkit-box-shadow: 2px 2px 4px gray
-moz-box-shadow: 2px 2px 4px gray
box-shadow: 2px 2px 4px gray
behavior:url("ie-css3.htc") /*IE8-*/
}
#calculator_table{
position: relative
margin: 10px auto
border-collapse:separate
border-spacing:10px 20px
}
h3{
position: relative
width: 60px
height: 30px
margin: 0 auto
}
#calculator_table td{
width: 50px
height: 30px
border: 1px solid gray
-webkit-border-radius: 2px
-moz-border-radius: 2px
border-radius: 2px
behavior:url("ie-css3.htc") /*IE8-*/
}
#calculator_table td input{
font-size: 16px
border: none
width: 50px
height: 30px
color: white
}
input.btn_color1{
background-color: orange
}
input.btn_color2{
background-color: #133645
}
input.btn_color3{
background-color: #59807d
}
input.btn_color4{
background-color: seagreen
}
input:active{
-webkit-box-shadow: 3px 3px 3px gray
-moz-box-shadow: 3px 3px 3px gray
box-shadow: 3px 3px 3px gray
behavior:url("ie-css3.htc") /*IE8-*/
}
JS
window.onload=function() {
var resultIpt = document.getElementById("resultIpt")//获取输出文本框
var btns_number = document.getElementsByClassName("btn_number")//获取数字输入按钮
var btns_operation = document.getElementsByClassName("btn_operation")//获取操作按钮
var simpleEqu = document.getElementById("simpleEqu")//获取"="按钮
var temp = ""
var num1= 0,num2=0
//获取第一个数
for(var i=0i<btns_number.lengthi++){
btns_number[i].onclick=function (){
temp += this.value
resultIpt.value = temp
}
}
//对获取到的数进行操作
for(var j=0j<btns_operation.lengthj++) {
btns_operation[j].onclick = function () {
num1=parseFloat(resultIpt.value)
oper = this.value
if(oper=="1/×"){
num1 = Math.pow(num1,-1)//取倒数
resultIpt.value = num1.toString()
}else if(oper=="﹢/﹣"){ //取相反数
num1 = -num1
resultIpt.value = num1.toString()
}else if(oper=="√"){ //取平方根
num1 =Math.sqrt(num1)
resultIpt.value = num1.toString()
}else if(oper=="←"){ //删除个位
resultIpt.value = resultIpt.value.substring(0, resultIpt.value.length - 1)
}else if(oper=="全清"){ //清除数字
resultIpt.value = ""
}
else{ //oper=="＋" "－" "×" "÷" "％"时，继续输入第二数字
temp = ""
resultIpt.value = temp
}
}
}
//输出结果
simpleEqu.onclick=function(){
num2=parseFloat(temp) //取得第二个数字
calculate(num1, num2, oper)
resultIpt.value = result.toString()
}
}
//定义一个计算函数
function calculate(num1, num2, oper) {
switch (oper) {
case "＋":
result=floatAdd(num1, num2)//求和
break
case "－":
result=floatSub(num1, num2)//求差
break
case "×":
result=floatMul(num1, num2) //求积
break
case "÷":
result=floatDiv(num1, num2) //求商
break
case "％":
result=num1%num2 //求余数
break
}
}
//精确计算
//浮点数加法运算
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)
}
}
function test(){var txt1 = document.getElementById("txt1"),
txt2 = document.getElementById("txt2"),
txt3 = document.getElementById("txt3"),
opt = document.getElementById("sel")
txt3.value = eval(txt1.value + opt.value + txt2.value)//eval函数可计算某个字符串，并执行其中的的js代码
} <input type="text" id="txt1" />
<select id="sel">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" id="txt2" />
=
<input type="text" id="txt3" />
<input type="button" id="btn" value="计算" onclick="test()"/>
