javascript编写简易计算器
更新时间：2017年05月06日 09:10:32 作者：粥要熬
这篇文章主要为大家详细介绍了javascript编写简易计算器的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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 终止函数执行的操作方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
这篇教程将展示如何使用Ionic2添加一个简单的删除按钮到列表，当用户滑动列表项到左边的时候。这是一个处理删除列表数据时候常用的模式，具体内容大家通过本文学习吧2017-01-01
本篇文章主要介绍了JS简单实现自定义右键菜单实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
这篇文章主要为大家详细介绍了微信小程序实现倒计时60s获取验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
JS中confirm,alert,prompt函数使用区别有哪些呢？2011-01-01
虽然有越来越多的网站在应用AJAX技术进行开发，但是构建一个复杂的AJAX应用仍然是一个难题。接下来小编给大家介绍JavaScript多线程，需要的朋友可以参考下2015-08-08
这篇文章主要介绍了js获得当前系统日期时间的方法，涉及javascript操作日期时间的相关技巧，非常简单实用，需要的朋友可以参考下2015-09-09
srcElement表格样式...2006-09-09
JavaScript使用FileSystemObject对象写入文本文件内容的方法
这篇文章主要介绍了JavaScript使用FileSystemObject对象写入文本文件内容的方法,实例分析了javascript使用ActiveXObject的技巧与常见问题的解决方法,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
这篇文章主要为大家介绍了学习JavaScript事件流和事件处理程序的注意事项，感兴趣的小伙伴们可以参考一下2016-01-01
最新评论