您的位置：首页 > Web前端 > JavaScript

用javascript写的简易计算器

2015-11-06 00:00 597 查看

摘要: 用substring()实现退格功能，用eval()实现对计算式字符串的识别和计算，用正则表达式解决了符号输入错误时报错和在计算完成后再次点击数字重新进行计算。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jisuanqi-ren</title>
<style type="text/css">
.btn{
background-color:#4BF3A7;
height:50px;
width: 60px;
}

.kuang{
height: 50px;
width: 254px;
}

.div1{
background-color:#00FFCE;
width: 260px;
height: 400px;
}

.image{
float: right;
margin-right: 500px;
width:400px;
height: 400px;

}
</style>
</head>
<body>
<div id="div2">
<h1><strong><center>计算器</center></strong></h1>
<table>
<input id="change" type="text" value="" >//显示框

<input style="height: 50px;width: 254px; " id="tuige" type="button" value="<-" onclick="tuige()">//退格键
<tr>//下面是按钮
<td><input type="button" value="1" onclick="number(this)"></td>
<td><input type="button" value="2" onclick="number(this)"></td>
<td><input type="button" value="3" onclick="number(this)"></td>
<td><input type="button" value="C" id="qingchu" onclick="qingchu()"></td>
</tr>

<tr>
<td><input type="button" value="4" onclick="number(this)"></td>
<td><input type="button" value="5" onclick="number(this)"></td>
<td><input type="button" value="6" onclick="number(this)"></td>
<td><input type="button" value="=" onclick="result()"></td>
</tr>
<tr>
<td><input type="button" value="7" onclick="number(this)"></td>
<td><input type="button" value="8" onclick="number(this)"></td>
<td><input type="button" value="9" onclick="number(this)"></td>
<td><input type="button" value="0" onclick="number(this)"></td>
</tr>

<tr>
<td><input type="button" value="+" onclick="jisuan(this)"></td>
<td><input type="button" value="-" onclick="jisuan(this)"></td>
<td><input type="button" value="*" onclick="jisuan(this)"></td>
<td><input type="button" value="/" onclick="jisuan(this)"></td>
</tr>

</table>
</div>

<script >

//数字输入函数
function number(num){
var kuang=document.getElementById("change");
var zhengze=/\b=\b/;
var test=zhengze.exec(kuang.value)
//判断是否完成计算，计算完成即清零
if(test=="=")
{
test="";
kuang.value=""
}
kuang.value+=num.value;
}

//退格函数
function tuige(){
var kuang=document.getElementById("change");
kuang.value=kuang.value.substring(0,kuang.value.length-1);
}

//清零函数
function qingchu(){
var kuang=document.getElementById("change");
kuang.value="";
}

//输入计算符号
function jisuan(fuhao){
var kuang=document.getElementById("change");
fuhao1=fuhao.value;
kuang.value+=fuhao1;
}

//判断符号正确性，输出结果
function result(){

var kuang=document.getElementById("change");

//判断符号正确性
var zhengze2=/\d\D\d/;
var fuhao2=zhengze2.exec(kuang.value);
if (fuhao2===null) {
alert("error");
}
else{

var result=eval(kuang.value);
kuang.value=kuang.value+"="+result;}
}

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html javascript 计算器

相关文章推荐

新的分享

章节导航