码迷,mamicode.com
首页 > Web开发 > 详细

js实现一个简单计算器

时间:2016-12-23 22:51:58      阅读:465      评论:0      收藏:0      [点我收藏+]

标签:turn   ast   运算符   meta   onclick   cti   lsp   rowspan   运算   

代码如下,仅支持webkit

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>calc</title>
<style type="text/css">
*{
padding:0;
margin:1px;
}
#calculater{
margin: auto;
margin-top: 30px;
border: solid 6px #2371D3;
border-spacing: 0px;
}
#display{
width: 100%;
height: 80px;
border-bottom: solid 4px #2371D3;
color: lightcoral;
font-family: helvetica;
font-size: 50px;
padding-left: 2px;
}
.numberkey{
cursor: pointer;
width: 120px;
height: 100px;
border: solid 1px #FFFFFF;
background: #2371D3;
color: #ffffff;
text-align: center;
font-family: helvetica;
font-size: 60px;
}
/*td{
background-color: red;
}*/
#equality{
cursor: pointer;
width: 120px;
height: 100%;
background: #2371D3;
border: solid 1px #FFFFFF;
color: #ffffff;
text-align: center;
font-family: helvetica;
font-size: 60px;
}
.numberkey:hover{
background: lightcoral;
}
#equality:hover{
background: lightcoral;
}
</style>
</head>
<body>
<table id="calculater" onclick="calculator()">
<tr>
<td id="display" colspan="5">0</td>
</tr>
<tr>
<td class="numberkey" >1</td>
<td class="numberkey" >2</td>
<td class="numberkey" >3</td>
<td class="numberkey" >+</td>
<td class="numberkey" id="deletesign">c</td>
</tr>
<tr>
<td class="numberkey" >4</td>
<td class="numberkey" >5</td>
<td class="numberkey" >6</td>
<td class="numberkey" >-</td>
<td rowspan="3" id="equality" onclick="resultscalculate()">=</td>
</tr>
<tr>
<td class="numberkey" >7</td>
<td class="numberkey" >8</td>
<td class="numberkey" >9</td>
<td class="numberkey" >*</td>
</tr>
<tr >
<td class="numberkey" >+/-</td>
<td class="numberkey" >0</td>
<td class="numberkey" >.</td>
<td class="numberkey" >/</td>
</tr>



<script type="text/javascript">

var results="";

var calresults="";
var lastkey="";
var results2="";
var flg=1;
var re1=/^[\*|\/].+/;
var re2=/.+[\*|\/]$/;
var re3=/(\+|-|\*|\/)/;
function calculator () {

// 点击=触发的calculater()函数得不到结果

if(event.srcElement.innerText=="="){
return;
}

// .c键的清除功能
if(event.srcElement.innerText=="c"){
results="";
display.innerText="0";
return;
}

//点击显示框时使触发的calculator函数得不到结果
if(event.srcElement.id=="display"){
return;
}

//显示框第一个元素为运算符显示输入错误,result清空

if(results.match(re1)){
results="";
display.innerText="wrong !";
return;
}

//显示框末位不能出现两个运算符
if(lastkey.match(re3)&&event.srcElement.innerText.match(re3)){
return;
}


//若结果后输入运算符继续运算
if(lastkey=="="&&event.srcElement.innerText.match(re3)){
results=calresults;
}

//取反功能

if (event.srcElement.innerText=="+/-"&&results!="") {
if (flg==-1) {
results=String(results2);
display.innerText=results;
flg=-flg;
return;
}
results2=results;
results = "-"+"("+results+")";
flg=-flg;
display.innerText=results;
return;
}
results+=event.srcElement.innerText;
lastkey=event.srcElement.innerText;
display.innerText=results;

}


function resultscalculate(){
if (results.match(re1)||results.match(re2)) {
display.innerText="输入错误";
results="";
return;
}

calresults=eval(results);
display.innerText=calresults;
lastkey="=";
results="";
}


</script>

</body>
</html>

 

js实现一个简单计算器

标签:turn   ast   运算符   meta   onclick   cti   lsp   rowspan   运算   

原文地址:http://www.cnblogs.com/rlann/p/6216063.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!