Home > Article > Web Front-end > Javascript implements simple calculator example code

Javascript implements simple calculator example code

高洛峰Original: 2016-12-09 13:08:421363browse

Rendering:

When I first started working on it, I didn’t take into account the two functions of clearing and backspace. Hehe, the whole thing I added later has a slight flaw compared to the traditional calculator.

Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js简单计算器</title>
 
<style type="text/css">
*{
margin:0px;
padding:0px;
}
input{
margin-top:2px;
margin-left:2px;
width:230px;
height:30px;
text-align:right;
}
button{
margin-top:2px;
margin-left:2px;
width:50px;
height:50px;
}
#container{
margin-left:1px;
border:1px solid #E4E4E4;
background:#BBBBBB;
width:235px;
height:215px;
}
</style>
 
<script>
 
function onLoad(){
//加载完毕后光标自动对应到输入框
document.getElementById("input").focus();
}
//读取按钮的值，传给输入框
function inputEvent(e){
//把val的值改为每个事件的innerHTML值
var val=e.innerHTML;
//获取input标签
var xsval=document.getElementById("input");
//标签里的value连接每个事件的innerHTML值
xsval.value+=val;
}
 
//计算出结果
function inputOper(){
var xsval=document.getElementById("input");
xsval.value=eval(document.getElementById("input").value);
}
//清零
function clearNum(){
var xsval=document.getElementById("input");
xsval.value="";
document.getElementById("input").focus();
}
//退格
function backNum(){
var arr=document.getElementById("input");
arr.value=arr.value.substring(0,arr.value.length-1);
}

</script>
</head>
 
<body onload="onLoad()">
<input id="input" type="text">
<div id="container">
<div>
<button onclick="inputEvent(this)">1</button>
<button onclick="inputEvent(this)">2</button>
<button onclick="inputEvent(this)">3</button>
<button onclick="inputEvent(this)">+</button>
 
</div>
 
<div>
<button onclick="inputEvent(this)">4</button>
<button onclick="inputEvent(this)">5</button>
<button onclick="inputEvent(this)">6</button>
<button onclick="inputEvent(this)">-</button>
</div>
 
<div>
<button onclick="inputEvent(this)">7</button>
<button onclick="inputEvent(this)">8</button>
<button onclick="inputEvent(this)">9</button>
<button onclick="inputEvent(this)">*</button>
</div>
 
<div>
<button onclick="inputEvent(this)">0</button>
<button onclick="inputEvent(this)">.</button>
<button onclick="inputOper(this)">=</button>
<button onclick="inputEvent(this)">/</button>
</div>
</div>
<button onclick="clearNum()">清零</button>
<button onclick="backNum()">退格</button>
</body>
 
</html>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How Node.js Sequelize implements database read-write separationNext article：How Node.js Sequelize implements database read-write separation

See more

Javascript implements simple calculator example code

Related articles