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

柴门鸟雀噪,归客千里至。光明顶下来,一路听着阵阵松涛,我们走过西海,飞来石,天海,爬过百步云梯,伴着凤凰松迎客松的多姿到了玉屏峰。玉屏峰犹如一道屏障,山面光滑如镜子,如屏风,还不时有几个斗大的字,说是哪位名人留下的。玉屏峰最险的地方是在一线天,上下达七八十度的落差,台阶狭,仅容一人,台阶窄,仅托一足,百米长,走多了,腿便打抖了,害怕了,还不时地叫着好刺激呀。

在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> 

本文简单快速的实现js计算器功能到此结束。坚强另一个名字叫硬撑小编再次感谢大家对我们的支持!

您可能有感兴趣的文章
JS获取鼠标点击时的位置

JS获取URL参数

Ajax跨域问题及解决方案(jsonp,cors)

ajax动态加载json数据并详细解析

ajax从JSP传递对象数组到后台的方法