Posted in Javascript onMay 06, 2017
本文实例为大家分享了js简易计算器的具体代码，供大家参考，具体内容如下
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易计算器</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
.content{
width: 300px;
height: 400px;
margin: 50px auto;
background: #CBC6C6;
border:1px solid #139EB7;
box-shadow: -5px -5px 5px #565454;
border-radius: 15px;
}
#toptext{
width: 280px;
height: 50px;
margin: 10px auto;
margin-left: 9px;
line-height: 50px;
border-radius: 15px;
text-align: right;
font-size: 24px;
border: 1px #F0D711 solid;
}
.btns{
width: 280px;
height: 300px;
margin: 10px auto;
}
.btns input{
width: 50px;
margin: 10px;
height: 60px;
float: left;
font-size: 24px;
line-height: 60px;
border-radius: 10px;
transform-origin: left top;
background: linear-gradient(to right,#0df60d,red);
}
.btns input:hover{
background: linear-gradient(to left,#0df60d,red);
transform: rotate(15deg);
}
</style>
</head>
<body>
<div class="content">
<input type="text" id="toptext">
<div class="btns">
<input type="button" value="1" class="num">
<input type="button" value="2" class="num">
<input type="button" value="3" class="num">
<input type="button" value="+" class="jisuan">
<input type="button" value="4" class="num">
<input type="button" value="5" class="num">
<input type="button" value="6" class="num">
<input type="button" value="-" class="jisuan">
<input type="button" value="7" class="num">
<input type="button" value="8" class="num">
<input type="button" value="9" class="num">
<input type="button" value="*" class="jisuan">
<input type="button" value="0" class="num">
<input type="button" value="C" id="clear">
<input type="button" value="=" id="equals">
<input type="button" value="/" class="jisuan">
</div>
</div>
<script type="text/javascript">
var text = document.getElementsByTagName('input')[0];
var clear = document.getElementById('clear');
var equals = document.getElementById('equals');
var js = document.getElementsByClassName('jisuan');
var num = document.getElementsByClassName('num');
text.value = 0;
var tex = "";
var fuhao = "";
var firstNum = "";
var secondNum = "";
for(var i=0 ; i<num.length; i++){
num[i].onclick = function (){
if(fuhao){
text.value += this.value;
secondNum = this.value;
}else{
tex = tex+this.value;
firstNum = tex;
text.value = tex;
}
};
}
for(var j=0; j<js.length; j++){
js[j].onclick = function(){
fuhao = this.value;
text.value += this.value;
};
}
equals.onclick=function(){
switch (fuhao) {
case '+':
var res = firstNum*1 + secondNum*1;
break;
case '-':
var res = firstNum - secondNum;
break;
case '*':
var res = firstNum * secondNum;
break;
case '/':
var res = firstNum / secondNum;
break;
default:
break;
}
text.value = res;
tex = "";
fuhao = "";
firstNum = "";
secondNum = "";
}
clear.onclick = function(){
text.value = "";
}
</script>
</body>
</html>
界面：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。
javascript编写简易计算器
- Author -
粥要熬声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@