简单快速的实现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 相关文章推荐
Google Map API更新实现用户自定义标注坐标
Jul 29 Javascript
javascript全局变量封装模块实现代码
Nov 28 Javascript
jQuery获取样式中的背景颜色属性值/颜色值
Dec 17 Javascript
javascipt匹配单行和多行注释的正则表达式
Nov 20 Javascript
JavaScript使用focus()设置焦点失败的解决方法
Sep 03 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
Aug 17 Javascript
jquery实现漂亮的二级下拉菜单代码
Aug 26 Javascript
angular directive的简单使用总结
May 24 Javascript
详解Js中的模块化是如何实现的
Oct 18 Javascript
VUE引入第三方js包及调用方法讲解
Mar 01 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
Apr 17 Javascript
vue slot与传参实例代码讲解
Apr 28 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脚本使WordPress拦截垃圾评论的方法示例
2015/12/10 PHP
解决ThinkPHP下使用上传插件Uploadify浏览器firefox报302错误的方法
2015/12/18 PHP
使用php实现网站验证码功能【推荐】
2017/02/09 PHP
PHP检测数据类型的几种方法(总结)
2017/03/04 PHP
PHP中$GLOBALS与global的区别详解
2019/03/21 PHP
JS 文件传参及处理技巧分析
2010/05/13 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
2013/03/05 Javascript
jquery如何实现在加载完iframe的内容后再进行操作
2013/09/10 Javascript
js简单实现删除记录时的提示效果
2013/12/05 Javascript
js中哈希表的几种用法总结
2014/01/28 Javascript
javascript对中文按照拼音排序代码
2014/08/20 Javascript
js实时获取窗口大小变化的实例代码
2016/11/18 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
2016/12/02 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
2017/09/18 Javascript
Vue单文件组件开发实现过程详解
2020/07/30 Javascript
使用Protocol Buffers的C语言拓展提速Python程序的示例
2015/04/16 Python
Python类的定义、继承及类对象使用方法简明教程
2015/05/08 Python
django基础之数据库操作方法(详解)
2017/05/24 Python
Python实现读取json文件到excel表
2017/11/18 Python
python根据unicode判断语言类型实例代码
2018/01/17 Python
python实现简单多人聊天室
2018/12/11 Python
pandas ix &amp;iloc &amp;loc的区别
2019/01/10 Python
django框架创建应用操作示例
2019/09/26 Python
基于python requests selenium爬取excel vba过程解析
2020/08/12 Python
HTML5 placeholder属性详解
2016/06/22 HTML / CSS
澳大利亚在线生活方式商店:Mytopia
2018/07/08 全球购物
求职简历的自我评价怎样写好
2013/10/07 职场文书
写好自荐信的要点
2013/11/06 职场文书
2014大学生批评与自我批评思想汇报
2014/09/21 职场文书
党员个人自我剖析材料
2014/10/08 职场文书
入党积极分子半年考察意见
2015/06/02 职场文书
《分一些蚊子进来》读后感3篇
2020/01/09 职场文书
python Django框架快速入门教程(后台管理)
2021/07/21 Python
台积电称即便经济低迷也没有降价的计划
2022/04/21 数码科技
大型强子对撞机再次重启探索“第五种自然力”
2022/04/29 数码科技