这篇文章主要介绍javascript如何编写简易计算器，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！代码如下<!DOCTYPE html> <html&n
这篇文章主要介绍javascript如何编写简易计算器，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
代码如下
<!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如何编写简易计算器”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注编程网html频道！
--结束END--
本文标题: javascript如何编写简易计算器
本文链接: https://www.lsjlt.com/news/73325.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0