简单快速的实现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 EasyUI 的EasyLoader功能介绍
Sep 12 Javascript
javascript实例分享---具有立体效果的图片特效
Jun 08 Javascript
JavaScript的jQuery库中function的存在和参数问题
Aug 13 Javascript
jQuery自定义动画函数实例详解(附demo源码)
Dec 10 Javascript
AngularJS 使用$sce控制代码安全检查
Jan 05 Javascript
js实现(全选)多选按钮的方法【附实例】
Mar 30 Javascript
深入理解$.each和$(selector).each
May 15 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
Apr 20 Javascript
基于JavaScript实现的快速排序算法分析
Apr 14 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
Jul 11 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
Jun 03 Javascript
vue+echarts实现动态折线图的方法与注意
Sep 01 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查询MySQL大量数据的时候内存占用分析
2011/07/22 PHP
php实现数组筛选奇数和偶数示例
2014/04/11 PHP
js实现动态改变字体大小代码
2014/01/02 Javascript
js实现网页标题栏闪烁提示效果实例分析
2014/11/20 Javascript
JavaScript面向对象程序设计教程
2016/03/29 Javascript
JavaScript必知必会(九)function 说起 闭包问题
2016/06/08 Javascript
JS去除空格和换行的正则表达式(推荐)
2016/06/14 Javascript
Bootstrap基本组件学习笔记之导航(10)
2016/12/07 Javascript
EasyUI学习之Combobox级联下拉列表(2)
2016/12/29 Javascript
nodejs nedb 封装库与使用方法示例
2020/02/06 NodeJs
Vue 封装防刷新考试倒计时组件的实现
2020/06/05 Javascript
[05:48]DOTA2英雄梦之声vol21 屠夫
2014/06/20 DOTA
Python中动态检测编码chardet的使用教程
2017/07/06 Python
Python实现Pig Latin小游戏实例代码
2018/02/02 Python
Python实用技巧之利用元组代替字典并为元组元素命名
2018/07/11 Python
对Python random模块打乱数组顺序的实例讲解
2018/11/08 Python
实例详解Python模块decimal
2019/06/26 Python
Python 抓取数据存储到Redis中的操作
2020/07/16 Python
pycharm 如何取消连按两下shift出现的全局搜索
2021/01/15 Python
Annoushka英国官网:英国奢侈珠宝品牌
2018/10/20 全球购物
哈利波特商店:Harry Potter Shop
2018/11/30 全球购物
女士和男士时尚鞋在线购物:Shoespie
2019/02/28 全球购物
荷兰音乐会和音乐剧门票订购网站:Topticketshop
2019/08/27 全球购物
经典C++面试题一
2016/11/06 面试题
C#面试题问题集
2016/04/02 面试题
大学生饮食连锁店创业计划书
2014/01/17 职场文书
超市重阳节活动方案
2014/02/10 职场文书
个人工作主要事迹
2014/05/08 职场文书
小学趣味运动会加油稿
2014/09/25 职场文书
招商引资工作汇报
2014/10/28 职场文书
工作检讨书大全
2015/01/26 职场文书
兴趣班停课通知
2015/04/24 职场文书
农民工工资承诺书大全
2015/05/04 职场文书
毕业实习感受与体会
2015/05/26 职场文书
结婚主持人致辞
2015/07/28 职场文书
值班管理制度范本
2015/08/06 职场文书