JavaScript制作简易计算器(不用eval)


Posted in Javascript onFebruary 05, 2017

本文实例为大家分享了js制作简易计算器的具体代码,供大家参考,具体内容如下

<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style type="text/css">
  * {
   padding: 0;
   margin: 0;
  }
  li {
   list-style: none;
  }
  body {
   background: #940032;
  }

  #counter {
   width: 500px;
   height: 420px;
   background: #939;
   margin: 50px auto 0;
   position: relative;
  }

  #counter h2 {
   line-height: 42px;
   padding-left: 15px;
   font-size: 14px;
   font-family: arial;
   color: #ff3333;
  }

  #counter a {
   font-weight: normal;
   text-decoration: none;
   color: #ff3333;
  }

  #counter a:hover {
   text-decoration: underline;
  }

  #bg {
   width: 280px;
   height: 200px;
   border: 3px solid #680023;
   background: #990033;
   filter: alpha(opacity=80);
   opacity: 0.8;
   position: absolute;
   left: 50%;
   top: 115px;
   margin-left: -141px;
  }

  #counter_content {
   width: 250px;
   position: absolute;
   top: 130px;
   left: 130px;
   z-index: 1;
  }

  #counter_content h3 {
   margin-bottom: 10px;
  }

  #counter_content h3 input {
   border: none;
   width: 223px;
   height: 30px;
   line-height: 30px;
   padding: 0 10px;
   background: url(img/ico.png) no-repeat;
   text-align: right;
   color: #333;
   font-size: 14px;
   font-weight: bold;
  }

  #counter_content div {
   width: 250px;
  }

  #counter_content input {
   width: 60px;
   height: 30px;
   line-height: 30px;
   float: left;
   background: url(img/ico.png) no-repeat -303px 0;
   text-align: center;
   color: #fff;
   cursor: pointer;
   margin: 0 1px 4px 0;
   border: 0;
  }

  #counter_content div > input:hover {
   background: url(img/ico.png) no-repeat -243px 0;
  }

  #counter p {
   width: 500px;
   position: absolute;
   bottom: 20px;
   left: 0;
   color: #ff3333;
   text-align: center;
   font-size: 12px;
  }
 </style>
</head>
<body>
<div id="counter">
 <h2>简易计算</h2>
 <div id="counter_content">
  <h3><input id="input1" type="text" value="0"/></h3>
  <div id="div1">
   <input type="button" value="7" onclick="kick('7')"/>
   <input type="button" value="8" onclick="kick('8')"/>
   <input type="button" value="9" onclick="kick('9')"/>
   <input type="button" value="+" onclick="kick('+')"/>
   <input type="button" value="4" onclick="kick('4')"/>
   <input type="button" value="5" onclick="kick('5')"/>
   <input type="button" value="6" onclick="kick('6')"/>
   <input type="button" value="-" onclick="kick('-')"/>
   <input type="button" value="1" onclick="kick('1')"/>
   <input type="button" value="2" onclick="kick('2')"/>
   <input type="button" value="3" onclick="kick('3')"/>
   <input type="button" value="*" onclick="kick('*')"/>
   <input type="button" value="0" onclick="kick('0')"/>
   <input type="button" value="C" onclick="kick('C')"/>
   <input type="button" value="=" onclick="kick('=')"/>
   <input type="button" value="/" onclick="kick('/')"/>
  </div>
 </div>
</div>
</body>
<script>
 var showInput = document.getElementById("input1");
 var isClear = false;
 var tempStr = "";
 var clacType = "";
 var isContinue = true;
 function kick(clickValue) {
  switch (clickValue) {
   case "=":
    if (tempStr != "" && clacType != "") {
     showInput.value = clac(tempStr, showInput.value, clacType);
     isContinue = false;
     clacType = "";
    }
    break;
   case "+":
   case "-":
   case "*":
   case "/":
    //如果预存的操作符不为空 表示表示连续操作
    if (clacType != "" && !isContinue) { //先执行计算
     tempStr = clac(tempStr, showInput.value, clacType);
     isClear = true;
     clacType = clickValue;
    } else {
     tempStr = showInput.value; //点击操作符之后 预存字符
     isClear = true;//表示点击了操作符
     clacType = clickValue;//预存操作符
    }
    isContinue = true;
    break;
   case "C":
    showInput.value = "0";
    isClear = false;
    tempStr = "";
    clacType = "";
    break;
   default://普通的数字按钮点击
    showInput.value = showInput.value == "0" ? "" : showInput.value;
    isContinue = false;
    if (isClear) {
     showInput.value = "";
     showInput.value += clickValue;
     isClear = false;
    } else {
     showInput.value += clickValue;
    }
    break;
  }
 }


 function clac(num1, num2, type) {
  switch (type) {
   case "+":
    return Number(num1) + Number(num2);
   case "-":
    return Number(num1) - Number(num2);
   case "*":
    return Number(num1) * Number(num2);
   case "/":
    return Number(num1) / Number(num2);
   default:
    break;
  }
  }
 </script>

关于计算器的精彩文章请查看《计算器专题》 ,更多精彩等你来发现!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
网页javascript精华代码集
Jan 24 Javascript
JavaScript中的闭包原理分析
Mar 08 Javascript
jquery下jstree简单应用 - v1.0
Apr 14 Javascript
javascript学习笔记(三) String 字符串类型介绍
Jun 19 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
Jul 15 Javascript
微信JS接口汇总及使用详解
Jan 09 Javascript
animate 实现滑动切换效果【实例代码】
May 05 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
Jul 09 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
Apr 27 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
Nov 30 Javascript
Bootstrap模态对话框用法简单示例
Aug 31 Javascript
ReactRouter的实现方法
Jan 25 Javascript
flexslider.js实现移动端轮播
Feb 05 #Javascript
简单实现js悬浮导航效果
Feb 05 #Javascript
用js制作淘宝放大镜效果
Oct 28 #Javascript
js实现百度搜索提示框
Feb 05 #Javascript
jQuery.Form上传文件操作
Feb 05 #Javascript
jQuery实现最简单实用的分秒倒计时
Feb 05 #Javascript
用jquery的attr方法实现图片切换效果
Feb 05 #Javascript
You might like
有关于PHP中常见数据类型的汇总分享
2014/01/06 PHP
linux中cd命令使用详解
2015/01/08 PHP
深入剖析PHP中printf()函数格式化使用
2016/05/23 PHP
thinkPHP框架对接支付宝即时到账接口回调操作示例
2016/11/14 PHP
如何解决PHP获取不到SESSION信息之一般情况
2019/10/10 PHP
layui数据表格自定义每页条数limit设置
2019/10/26 PHP
js Date自定义函数 延迟脚本执行
2010/03/10 Javascript
关于div自适应高度/左右高度自适应一致的js代码
2013/03/22 Javascript
zTree插件之单选下拉菜单实例代码
2013/11/07 Javascript
jquery制作弹窗提示窗口代码分享
2014/03/02 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
2014/03/13 Javascript
JS替换字符串中字符即替换全部而不是第一个
2014/06/04 Javascript
JavaScript实现控制打开文件另存为对话框的方法
2015/04/17 Javascript
Vue.js 中的 $watch使用方法
2017/05/25 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
2017/08/04 Javascript
强大的JavaScript响应式图表Chartist.js的使用
2017/09/13 Javascript
axios对请求各种异常情况处理的封装方法
2018/09/25 Javascript
3分钟了解vue数据劫持的原理实现
2019/05/01 Javascript
详解element-ui中el-select的默认选择项问题
2019/08/02 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
2019/10/26 Javascript
vue-router结合vuex实现用户权限控制功能
2019/11/14 Javascript
[01:11:02]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
[00:19]CN DOTA NEVER DIE!VG夺冠rOtK接受采访
2019/12/23 DOTA
python批量下载网站马拉松照片的完整步骤
2018/12/05 Python
pycharm 更改创建文件默认路径的操作
2020/02/15 Python
python通过文本在一个图中画多条线的实例
2020/02/21 Python
如何快速一次性卸载所有python包(第三方库)呢
2020/10/20 Python
pytest fixtures装饰器的使用和如何控制用例的执行顺序
2021/01/28 Python
python 如何在测试中使用 Mock
2021/03/01 Python
神经网络训练采用gpu设置的方式
2021/03/03 Python
联想美国官方商城:Lenovo美国
2017/06/19 全球购物
含精油的天然有机化妆品:Indemne
2019/08/27 全球购物
北京SQL新华信咨询
2016/09/30 面试题
无刑事犯罪记录证明范本
2014/09/29 职场文书
老龙头导游词
2015/02/11 职场文书
2015年安全教育月活动总结
2015/03/26 职场文书