JS制作簡易計算器的實例代碼

更新時間：2020年07月04日 08:37:57 作者：正好00

這篇文章主要介紹了JS制作簡易計算器的方法，文中實例代碼非常詳細，幫助大家更好的理解和學習，感興趣的朋友可以了解下

做一個簡易計算器，效果圖片

c表示清空，為一個空字符串

+/-表示該值為正還是負

%表示當前值/100

←表示退格，往前刪除一個值

eval 函數(shù)是能夠計算出字符串表達式或者語句的結果，把結果求出來。

代碼如下

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   #div1{
    margin:20px auto;
    width:420px;
    height:490px;
    background-color:#E8E8E8;
    border:1px solid #ccc;
    border-radius:5px;
    }
   .div2{
    width:410px;
    height:60px;
    border:1px solid #ccc;
    margin:5px auto;
    border-radius:5px;
    text-align:right;
    font-size:30px;
    background-color:white;
    padding-top:10px;
       } 
   
   .div3{
    width:410px;
    height:60px;
    margin:5px auto;
    float:left;
   }
   .div13{
    float:left;
    width:70px;
    height:60px;
    border:1px solid #ccc;
    background-color: ghostwhite;
    margin-left:8px;
    text-align:center;
    font-size:30px;
    color:deepskyblue;
    border-radius:5px;
    cursor:default;
    padding-top:10px;
    box-shadow:4px 3px 3px #CCCCCC;
    }
   .div133{width:160px;}
   .top{margin-top:10px;margin-left:10px;} 
   .color{color:black;}
   .top1{margin-top:20px;margin-left:10px;}
   .top2{margin-top:30px;margin-left:10px;}
   .top3{margin-top:40px ;margin-left:10px;}
   .div23{float:left;}
   .div33{float:left;}
  </style>
 </head>
 <body>
  <div id="div1">
   <div class="div2" id="input"><b>0</b></div>
   <div class="div3">
    <div class="div13" onclick="w(' ')"><b>C</b></div>
    <div class="div13"onclick="w('opposite')"><b>+/-</b></div>
    <div class="div13" onclick="w('percent')"><b>%</b></div>
    <div class="div13 div133" onclick="w('backspace')"><b>←</b></div>
   </div>
    <div class="div3">
     <div class="div13 top color" onclick="a('7')"><b>7</b></div>
     <div class="div13 top color" onclick="a('8')"><b>8</b></div>
     <div class="div13 top color" onclick="a('9')"><b>9</b></div>
     <div class="div13 top " onclick="a('+')"><b>+</b></div>
     <div class="div13 top " onclick="a('-')"><b>-</b></div>
     
    </div>
    <div class="div3">
     <div class="div13 top1 color" onclick="a('4')"><b>4</b></div>
     <div class="div13 top1 color"onclick="a('5')"><b>5</b></div>
     <div class="div13 top1 color" onclick="a('6')"><b>6</b></div>
     <div class="div13 top1" onclick="a('*')"><b>×</b></div>
     <div class="div13 top1" onclick="a('/')"><b>÷</b></div>
     </div>
     <div class="div3">
     <div class="div13 top2 color" onclick="a('1')"><b>1</b></div>
     <div class="div13 top2 color" onclick="a('2')"><b>2</b></div>
     <div class="div13 top2 color"onclick="a('3')"><b>3</b></div>
     <div class="div13 top2"onclick="w('pow')"><b>x<sup>2</sup></b></div>
     <div class="div13 top2" onclick="w('sqrt')"><b>√</b></div>
     </div>
     <div class="div3">
      <div class="div13 top3 color" onclick="a('0')"><b>0</b></div>
      <div class="div13 top3"onclick="a('.')"><b>.</b></div>
      <div class="div13 top3"onclick="e('=')"><b>=</b></div>
     </div>
     
     </div>
    <script>
     input=document.getElementById("input");
    s="";
     function a(v)
     {
     s=s+v;
     input.innerHTML=s; 
     }
    function e(v)
     {
     input.innerHTML=eval(s);
     }
    
    function w(type)
     { 
     switch(type)
     { case ' ':s='';break;
      case 'opposite':s=-s;break;
      case 'percent':s=s/100;break;
      case 'pow':s=Math.pow(s,2);break;
      case 'sqrt':s=Math.sqrt(s);break;
      case 'backspace':s=s.substr(s,s.length-1);// case  'backspace':s=s.substring(0,s.length-1);
      }
      input.innerHTML=s; 
      } 
      
     
     
   
     
     
     
    </script>
   
   
   
  
 </body>
</html>

這里我本來是采用的substring這個函數(shù)的，但是在計算的時候，當只留下一個值的時候，按←的時候就不起作用，但是把substring改成substr的時候就能清除的了，原因我覺得應該是這樣:s=s.substring(s,s.length-1);當只剩下一個值的時候，假設s值為7,substring中的第一個參數(shù)為是，表示中國字符串的首地址，就是0，第二個參數(shù)為0，怎么取，但是換成這樣是可以的s=s.substring(0,s.length-1);，但是用s=s.substr(s,s.length-1);當只剩下一個值的時候是可以清除掉的，我想應該是當?shù)诙€參數(shù)是取得個數(shù)為0的時候，就把空字符串賦給s了吧。

以上就是JS制作簡易計算器的實例代碼的詳細內(nèi)容，更多關于JS制作簡易計算器的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

淺談javascript中遇到的字符串對象處理
下面小編就為大家?guī)硪黄獪\談javascript中遇到的字符串對象處理。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-11-11
javascript面向對象三大特征之繼承實例詳解
這篇文章主要介紹了javascript面向對象三大特征之繼承,簡單描述了繼承的概念、原理,并結合實例形式詳細分析了繼承的常見實現(xiàn)方法與操作注意事項,需要的朋友可以參考下
2019-07-07
帶參數(shù)的function 的自運行效果代碼
這篇文章介紹了帶參數(shù)的function 的自運行效果,通過實例對比展示了帶參數(shù)與不帶參數(shù)function自運行效果,需要的朋友可以參考一下
2007-12-12
JavaScript–Apple設備檢測示例代碼
JavaScript–Apple設備檢測示例代碼。需要的朋友可以過來參考下，希望對大家有所幫助
2013-11-11
JS實現(xiàn)遮罩層效果的簡單實例
這篇文章介紹了JS實現(xiàn)遮罩層效果的簡單實例，有需要的朋友可以參考一下
2013-11-11
JS獲取日期的方法實例【昨天,今天,明天,前n天,后n天的日期】
這篇文章主要介紹了JS獲取日期的方法,結合具體實例分析了javascript計算昨天,今天,明天,前n天,后n天日期及對應的星期幾實現(xiàn)技巧,需要的朋友可以參考下
2017-09-09
使用javascript獲取flash加載的百分比的實現(xiàn)代碼
使用javascript獲取flash加載的百分比的實現(xiàn)代碼，方便flash小游戲判斷頁面，提高用戶體驗。
2011-05-05
詳解關于webpack多入口熱加載很慢的原因
這篇文章主要介紹了詳解關于webpack多入口熱加載很慢的原因，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-04-04
uin-app+mockjs實現(xiàn)本地數(shù)據(jù)模擬
這篇文章主要為大家詳細介紹了uin-app+mockjs實現(xiàn)本地數(shù)據(jù)模擬，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-08-08
javaScript把其它類型轉換為Number類型
在本篇文章里小編給大家整理的是關于javaScript把其它類型轉換為Number類型的相關文章，有需要的朋友們學習下。
2019-10-10