简单快速的实现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 相关文章推荐
体验js中splice()的强大(插入、删除或替换数组的元素)
Jan 16 Javascript
往光标所在位置插入值的js代码
Sep 22 Javascript
javascript字符串替换及字符串分割示例代码
Dec 12 Javascript
js实现鼠标划过给div加透明度的方法
May 25 Javascript
详解JS正则replace的使用方法
Mar 06 Javascript
bootstrapfileinput实现文件自动上传
Nov 08 Javascript
Javascript之深入浅出prototype
Feb 06 Javascript
vue中使用localstorage来存储页面信息
Nov 04 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
Apr 17 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
May 22 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
May 11 Javascript
angular4实现带搜索的下拉框
Mar 25 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 进程锁定问题分析研究
2009/11/24 PHP
PHP的加密方式及原理
2012/06/14 PHP
PHP中的use关键字概述
2014/07/23 PHP
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
Laravel与CI框架中截取字符串函数
2016/05/08 PHP
thinkPHP5.0框架开发规范简介
2017/03/25 PHP
php 删除一维数组中某一个值元素的操作方法
2018/02/01 PHP
实现php删除链表中重复的结点
2018/09/27 PHP
jquery中的sortable排序之后的保存状态的解决方法
2010/01/28 Javascript
jQuery中使用了document和window哪些属性和方法小结
2011/09/13 Javascript
jquery插件qrcode在线生成二维码
2015/04/26 Javascript
JS+CSS实现滑动切换tab菜单效果
2015/08/25 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
2020/06/23 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
2015/12/04 Javascript
js实现不重复导入的方法
2016/03/02 Javascript
CSS3 3D 技术手把手教你玩转
2016/09/02 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
2016/12/04 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
2017/03/08 Javascript
浅谈React + Webpack 构建打包优化
2018/01/23 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
2018/12/11 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
2019/01/24 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
2019/03/11 Javascript
分享一个vue项目“脚手架”项目的实现步骤
2019/05/26 Javascript
vue使用代理解决请求跨域问题详解
2019/07/24 Javascript
详解React 元素渲染
2020/07/07 Javascript
使用Python脚本将文字转换为图片的实例分享
2015/08/29 Python
Python中sort和sorted函数代码解析
2018/01/25 Python
Django框架中间件(Middleware)用法实例分析
2019/05/24 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
Django-Scrapy生成后端json接口的方法示例
2020/10/06 Python
css3 线性渐变和径向渐变示例附图
2014/04/08 HTML / CSS
SportsDirect.com新加坡:英国第一体育零售商
2019/03/30 全球购物
市委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
2015新学期校长寄语(3篇)
2015/03/25 职场文书
幸福终点站观后感
2015/06/04 职场文书