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

用javascript实现简单计算器

2016-12-09 15:49 274 查看

这是一个简单计算器的实现。可以实现简单的加，减，乘，除功能，用户按下“←”按钮，删除当前算术表达式最后一个字符，并更新显示,用户按下“CE”按钮，清除当前算术表达式,如果算术表达式非法，弹出警告框提醒用户，并终止计算.

这是HTML代码：<!DOCTYPE <html>
<head>
   <title>Calculator</title>
   <meta charset = "utf-8">
   <link rel="stylesheet" type="text/css" href="css/#.css">
   <script type="text/javascript" src="js/#.js"></script>
</head>
<body>
   <div class = "middlediv">
       <header class = "top">简单计算器</header>
       <div class = "indiv">
           <input type = "text" class = "topinput" id = "in"></input>
           <input type = "button" class = "newinput" value = "7" id = "7" onclick = "get(this)"></input>
           <input type = "button" class = "newinput" value = "8" id = "8" onclick = "get(this)"></input>
           <input type = "button" class = "newinput" value = "9" id = "9" onclick = "get(this)"></input>
           <input type = "button" class = "newinput" value = "/" id = "/" onclick = "get(this)"></input>
           <input type = "button" class = "newinput" value = "4" id = "4" onclick = "get(this)"></input>
           <input type = "button" class = "newinput" value = "5" id = "5" onclick = "get(this)"></input>
           <input type = "button" class = "newinput" value = "6" id = "6" onclick = "get(this)"></input>
           <input type = "button" class = "newinput" value = "*" id = "*" onclick = "get(this)"></input>
           <input type = "button" class = "newinput" value = "1" id = "1" onclick = "get(this)"></input>
           <input type = "button" class = "newinput" value = "2" id = "2" onclick = "get(this)"></input>
           <input type = "button" class = "newinput" value = "3" id = "3" onclick = "get(this)"></input>
           <input type = "button" class = "newinput" value = "-" id = "-" onclick = "get(this)"></input>
           <input type = "button" class = "newinput" value = "0" id = "0" onclick = "get(this)"></input>
           <input type = "button" class = "newinput" value = "." id = "." onclick = "get(this)"></input>
           <input type = "button" class = "newinput" value = "<-" id = "<-" onclick = "back()"></input>
           <input type = "button" class = "newinput" value = "+" id = "+" onclick = "get(this)"></input>
           <input type = "button" class = "newinput" value = "(" id = "(" onclick = "get(this)"></input>
           <input type = "button" class = "newinput" value = ")" id = ")" onclick = "get(this)"></input>
           <input type = "button" class = "newinput" value = "CE" id = "CE" onclick = "clean()"></input>
           <input type = "button" class = "newinput" value = "=" id = "=" onclick = "neweval()"></input>
       </div>
   </div>
</body>
</html>

这是CSS代码

.middlediv{
width: 600px;
margin: 0 auto;
background-color: #ffffff;
}
.top{
color: green;
text-align: center;
font-size: 40px;
font-weight: bold;
}
.indiv{
width: 100%;
height: 600px;
border-color: black;
border-style: solid;
border-width: thick;
margin: 20px auto;
}
.topinput{
height: 40px;
width: 560px;
margin: 20px;
border-color: gray;
border-style: solid;
border-width:2px;
text-align: right;
font-size: 20px;
}
.newinput{
float: left;
width: 130px;
margin:10px;
height: 80px;
font-size: 30px;
}

这是JS代码

var result = "";
function get(event){
result += event.value;
document.getElementById('in').value = result;
}
function neweval(){
try{
result = eval(result);
}
catch(err){
alert("计算式非法");
document.getElementById('in').value = "";
result = "";
}
if(typeof(result) == 'undefined'){
alert("计算式非法");
document.getElementById('in').value = "";
result = "";
}
else{
document.getElementById('in').value = result;
result = "";
}
}
function clean(){
result = "";
document.getElementById('in').value = result;
}
function back(){
result = result.substring(0,result.length-1);
document.getElementById('in').value = result;
}

在实现的过程中，使用了js中的eavl（string）函数，对字符串进行计算，出现错误时，catch错误，弹出提示框警告计算式非法。

这是一个我的简单计算器的实现，其中会有一些不足和错误，希望大家可以指出，让我可以从中得到学习和成长。

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

标签：

相关文章推荐

新的分享

章节导航