用js製做簡易計算器

時間 2020-07-05

標籤製做簡易計算器欄目 JavaScript 简体版

原文原文鏈接

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

c表示清空，爲一個空字符串html

+/-表示該值爲正仍是負ide

%表示當前值/100函數

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

eval 函數是可以計算出字符串表達式或者語句的結果，把結果求出來。code

代碼以下htm

<!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>&times;</b></div>
                   <div class="div13 top1" onclick="a('/')"><b>&divide;</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這個函數的，可是在計算的時候，當只留下一個值的時候，按←的時候就不起做用，可是把substring改爲substr的時候就能清除的了，緣由我以爲應該是這樣:s=s.substring(s,s.length-1);當只剩下一個值的時候，假設s值爲7,substring中的第一個參數爲是，表示中國字符串的首地址，就是0，第二個參數爲0，怎麼取，可是換成這樣是能夠的s=s.substring(0,s.length-1);，可是用s=s.substr(s,s.length-1);當只剩下一個值的時候是能夠清除掉的，我想應該是當第二個參數是取得個數爲0的時候，就把空字符串賦給s了吧。blog