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 JSQL,SQL无处不在,
May 05 Javascript
基于jQuery的Tab选项框效果代码(插件)
Mar 01 Javascript
一样的table?不一样的table(可编辑状态table)
Sep 19 Javascript
获取内联和链接中的样式(js代码)
Apr 11 Javascript
jquery插件hiAlert实现网页对话框美化
May 03 Javascript
JavaScript实现表格点击排序的方法
May 11 Javascript
easyui validatebox验证
Apr 29 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
node使用request请求的方法
Dec 20 Javascript
bootstrap实现嵌套模态框的实例代码
Jan 10 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
Nov 12 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/04/21 PHP
PHP远程调试之XDEBUG
2015/12/29 PHP
php实现带读写分离功能的MySQL类完整实例
2016/07/28 PHP
浅谈laravel数据库查询返回的数据形式
2019/10/21 PHP
[原创]网络复制内容时常用的正则+editplus
2006/11/30 Javascript
Prototype使用指南之base.js
2007/01/10 Javascript
js ondocumentready onmouseover onclick onmouseout 样式
2010/07/22 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
2011/06/27 Javascript
DIV外区域Click后关闭DIV的实现代码
2011/12/21 Javascript
js处理自己不能定义二维数组的方法详解
2014/03/03 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
2014/06/30 Javascript
javascript实现省市区三级联动下拉框菜单
2015/11/17 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
2016/01/13 Javascript
jQuery实现的多滑动门,多选项卡效果代码
2016/03/28 Javascript
javascript html5摇一摇功能的实现
2016/04/19 Javascript
关于vue.js组件数据流的问题
2017/07/26 Javascript
JS 实现banner图片轮播效果(鼠标事件)
2017/08/04 Javascript
JavaScript登录验证基础教程
2017/11/01 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
2018/09/18 Javascript
JavaScript寄生组合式继承原理与用法分析
2019/01/11 Javascript
对TypeScript库进行单元测试的方法
2019/07/18 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
2020/01/16 Javascript
windows下安装python paramiko模块的代码
2013/02/10 Python
微信跳一跳游戏python脚本
2020/04/01 Python
JSON文件及Python对JSON文件的读写操作
2018/10/07 Python
python实现播放音频和录音功能示例代码
2018/12/30 Python
python爬虫之自制英汉字典
2019/06/24 Python
Python Django的安装配置教程图文详解
2019/07/17 Python
Django CBV与FBV原理及实例详解
2019/08/12 Python
Python 中list ,set,dict的大规模查找效率对比详解
2019/10/11 Python
Pycharm debug调试时带参数过程解析
2020/02/03 Python
简约控的天堂:The Undone
2016/12/21 全球购物
意大利巧克力店:Chocolate Shop
2019/07/24 全球购物
李维斯牛仔裤英国官方网站:Levi’s英国
2019/10/10 全球购物
酒店秘书求职信范文
2014/02/17 职场文书
交通志愿者活动总结
2014/06/27 职场文书