javascript编写简易计算器
程序员文章站
2022-07-20 09:59:40
本文实例为大家分享了js简易计算器的具体代码，供大家参考，具体内容如下
代码如下
本文实例为大家分享了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>
界面：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。