简单快速的实现js计算器功能


Posted in Javascript onAugust 17, 2017

在js的全局方法中有一个eval()方法,由于平时不怎么用,所以到关键时候就没想起来它

想写一个简易的计算器,本来以为要不了多久就能写出来的,谁知道愣是花费了我近两个小时的时间来写,但结果还是不能令我满意。想找一个更好的方法来写,不想写的那么麻烦,用什么方法呢?想了一个遍,后来猛然看到屏幕上有一个eval(),当时我的电脑正打开着网页。福星来了,对啊,我浪费了这么长时间写出来的东西还不能令我满意,一个eval()不就搞定了么,下面就给大家看一下我写的代码,写的很粗糙,还请大家多多指正。

<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="UTF-8"> 
 <title></title> 
 <style type="text/css"> 
  .box{ 
  width: 400px; 
  height: 450px; 
  margin: 0 auto; 
  background: pink; 
  } 
  .show{ 
  width:100%; 
  height: 100px; 
  line-height: 100px; 
  text-align: right; 
  background: #FFFFFF; 
  border:1px solid #000; 
  } 
  .operate{ 
  width: 100%; 
  height: 250px; 
  margin-top: 50px; 
  } 
  p{ 
  margin-top: 20px; 
  text-align: center; 
  } 
  input{ 
  width: 80px; 
  height: 40px; 
  /*margin-left: 50px;*/ 
  text-align: center; 
  } 
  input:nth-child(5n),input:first-child{ 
  margin-left: 0; 
  } 
 </style> 
 </head> 
 <body> 
 <div class="box"> 
  <div class="show" id="show"></div> 
  <div class="operate"> 
  <p> 
   <input type="button" name="one" id="one" value="1" onclick="num(1)"/> 
   <input type="button" name="two" id="two" value="2" onclick="num(2)"/> 
   <input type="button" name="three" id="three" value="3" onclick="num(3)"/> 
   <input type="button" name="plus" id="plus" value="+" onclick="num('+')"/> 
  </p> 
  <p> 
   <input type="button" name="four" id="four" value="4" onclick="num(4)"/> 
   <input type="button" name="five" id="five" value="5" onclick="num(5)"/> 
   <input type="button" name="six" id="six" value="6" onclick="num(6)"/> 
   <input type="button" name="reduce" id="reduce" value="-" onclick="num('-')"/> 
  </p> 
  <p> 
   <input type="button" name="seven" id="seven" value="7" onclick="num(7)"/> 
   <input type="button" name="eight" id="eight" value="8" onclick="num(8)"/> 
   <input type="button" name="nine" id="nine" value="9" onclick="num(9)"/> 
   <input type="button" name="times" id="times" value="x" onclick="num('*')"/> 
  </p> 
  <p> 
   <input type="button" name="divide" id="divide" value="/" onclick="num(/)"/> 
   <input type="button" name="zero" id="zero" value="0" onclick="num(0)"/> 
   <input type="button" name="equal" id="equal" value="=" onclick="equal()"/> 
   <input type="button" name="mod" id="mod" value="%" onclick="num('%')"/> 
  </p> 
  </div> 
   
 </div> 
 </body> 
 <script type="text/javascript"> 
 function num(figure){ 
//  var figure = figure.toString(); 
  var show = document.getElementById("show"); 
  showNum = show.innerHTML+figure; 
  show.innerHTML = showNum; 
 } 
 function equal(){ 
  document.getElementById("show").innerHTML = eval(document.getElementById("show").innerHTML); 
  /*var lal = document.getElementById("show").innerHTML; 
  alert(lal);*/ 
 } 
 </script> 
</html>

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

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

Javascript 相关文章推荐
jQuery 网易相册鼠标移动显示隐藏效果实现代码
Mar 31 Javascript
javascript模拟实现ajax加载框实例
Oct 15 Javascript
js父页面与子页面不同时显示的方法
Oct 16 Javascript
JavaScript如何动态创建table表格
Aug 02 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
Dec 25 Javascript
JavaScript操作文件_动力节点Java学院整理
Jun 30 Javascript
Vue2.0 slot分发内容与props验证的方法
Dec 12 Javascript
Vue中的异步组件函数实现代码
Jul 20 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
Nov 30 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
vue.config.js中配置Vue的路径别名的方法
Feb 11 Javascript
详解Howler.js Web音频播放终极解决方案
Aug 23 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 #jQuery
如何理解Vue的.sync修饰符的使用
Aug 17 #Javascript
浅谈JS中的反柯里化( uncurrying)
Aug 17 #Javascript
js编写简单的聊天室功能
Aug 17 #Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
Aug 17 #Javascript
Canvas放置反弹效果随机图形(实例)
Aug 17 #Javascript
js实现方块上下左右移动效果
Aug 17 #Javascript
You might like
php数字游戏 计算24算法
2012/06/10 PHP
利用php操作memcache缓存的基础方法示例
2017/08/02 PHP
PHP删除数组中指定下标的元素方法
2018/02/03 PHP
Jquery 1.42 checkbox 全选和反选代码
2010/03/27 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
2014/05/04 Javascript
JS判断移动端访问设备并加载对应CSS样式
2014/06/13 Javascript
jQuery实现的登录浮动框效果代码
2015/09/26 Javascript
js显示动态时间的方法详解
2016/08/20 Javascript
js中json处理总结之JSON.parse
2016/10/14 Javascript
微信开发 使用picker封装省市区三级联动模板
2016/10/28 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
2016/12/03 Javascript
原生JS仿QQ阅读点击展开、收起效果
2017/03/08 Javascript
Angularjs实现上传图片预览功能
2017/09/01 Javascript
JS返回顶部实例代码
2020/08/09 Javascript
详解Vue组件实现tips的总结
2017/11/01 Javascript
IntelliJ IDEA 安装vue开发插件的方法
2017/11/21 Javascript
原生js实现移动端触摸轮播的示例代码
2017/12/22 Javascript
微信小程序后台持续定位功能使用详解
2019/08/23 Javascript
Vue仿Bibibili首页的问题
2021/01/21 Vue.js
总结python爬虫抓站的实用技巧
2016/08/09 Python
不可错过的十本Python好书
2017/07/06 Python
Python3 使用cookiejar管理cookie的方法
2018/12/28 Python
pyqt5实现登录界面的模板
2020/05/30 Python
Python3.6实现带有简单界面的有道翻译小程序
2019/04/16 Python
新加坡网上化妆品店:Best Buy World
2018/05/18 全球购物
复古服装:RetroStage
2019/05/10 全球购物
Mybag美国/加拿大:英国奢华包包和名牌手袋网站
2020/02/16 全球购物
小学家长会邀请函
2014/01/23 职场文书
事业单位分类改革实施方案
2014/03/21 职场文书
宣传普通话标语
2014/06/27 职场文书
2014年信息技术工作总结
2014/12/16 职场文书
小学四年级班务总结该怎么写?
2019/08/16 职场文书
详解Flutter和Dart取消Future的三种方法
2022/04/07 Java/Android
索尼ICF-36收音机评测
2022/04/30 无线电
如何利用python实现Simhash算法
2022/06/28 Python