快捷導(dǎo)航

簡(jiǎn)單快速的實(shí)現(xiàn)js計(jì)算器功能

更新時(shí)間：2017年08月17日 09:54:22 作者：蒲小若

這篇文章主要教大家如何快速簡(jiǎn)單的實(shí)現(xiàn)js計(jì)算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

在js的全局方法中有一個(gè)eval()方法，由于平時(shí)不怎么用，所以到關(guān)鍵時(shí)候就沒(méi)想起來(lái)它

想寫(xiě)一個(gè)簡(jiǎn)易的計(jì)算器，本來(lái)以為要不了多久就能寫(xiě)出來(lái)的，誰(shuí)知道愣是花費(fèi)了我近兩個(gè)小時(shí)的時(shí)間來(lái)寫(xiě)，但結(jié)果還是不能令我滿意。想找一個(gè)更好的方法來(lái)寫(xiě)，不想寫(xiě)的那么麻煩，用什么方法呢？想了一個(gè)遍，后來(lái)猛然看到屏幕上有一個(gè)eval(),當(dāng)時(shí)我的電腦正打開(kāi)著網(wǎng)頁(yè)。福星來(lái)了，對(duì)啊，我浪費(fèi)了這么長(zhǎng)時(shí)間寫(xiě)出來(lái)的東西還不能令我滿意，一個(gè)eval()不就搞定了么，下面就給大家看一下我寫(xiě)的代碼，寫(xiě)的很粗糙，還請(qǐng)大家多多指正。

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

關(guān)于計(jì)算器的精彩文章請(qǐng)查看《計(jì)算器專(zhuān)題》，更多精彩等你來(lái)發(fā)現(xiàn)！

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: