溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

JS制作計算器的方法

發(fā)布時間：2020-07-06 10:59:29 來源：億速云 閱讀：174 作者：清晨 欄目：開發(fā)技術(shù)

小編給大家分享一下JS制作計算器的方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

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

JS制作計算器的方法

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

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

%表示當前值/100

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

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

代碼如下

<!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的時候就能清除的了，原因我覺得應(yīng)該是這樣:s=s.substring(s,s.length-1);當只剩下一個值的時候，假設(shè)s值為7,substring中的第一個參數(shù)為是，表示中國字符串的首地址，就是0，第二個參數(shù)為0，怎么取，但是換成這樣是可以的s=s.substring(0,s.length-1);，但是用s=s.substr(s,s.length-1);當只剩下一個值的時候是可以清除掉的，我想應(yīng)該是當?shù)诙€參數(shù)是取得個數(shù)為0的時候，就把空字符串賦給s了吧。

看完了這篇文章，相信你對JS制作計算器的方法有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手