快捷導航

JS實現(xiàn)蘋果計算器

更新時間：2021年04月09日 17:33:41 作者：ITDaBao

這篇文章主要為大家詳細介紹了JS實現(xiàn)蘋果計算器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JS實現(xiàn)蘋果計算器的具體代碼，供大家參考，具體內(nèi)容如下

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>手機</title>
  <style type="text/css">
   #phone{
    position: relative;
    width: 380px;
    height: 700px;
    box-shadow: 1px 1px 10px #808080;
    margin: auto;
    border-radius: 30px;
   }
   
   .kj{
    position: absolute;
    width: 8px;
    height: 60px;
    background-color: black;
    right: -8px ;
    top:100px;
   }
   .yl{
    position: absolute;
    width: 8px;
    height: 80px;
    background-color: black;
    left: -8px;
    top: 85px;
   }
   
   .top{
    width: 120px;
    height: 50px;
    /* box-shadow: 1px 1px 10px #808080; */
    margin: auto;
   }
   
   .mkf{
    float: left;
    width: 100px;
    height: 10px;
    border-radius: 5px;
    background-color: black;
    margin-right: 10px;
    margin-top: 20px;
   }
   .sxj{
    float: left;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: black;
    margin-top: 20px;
   }
   
   .screen{
    width: 370px ;
    height: 600px;
    background-color: black;
    margin: auto;
   }
   .result-num{
    height: 120px;
    /* padding-top: 30px; */
   }
   .sp{
    float: right;
    color: white;
    font-size: 50px;
    margin-top: 50px;
   }
   
   .num{
    height: 480px;
   }
   
   .key{
    width: 82.5px;
    height: 82.5px;
    border-radius: 50px;
    background-color: #808080;
    float: left;
    margin: 5px;
    
    
    text-align: center;
    line-height: 80px;
    font-size: 20px;
    color: white;
   }
   .first{
    background-color: #B0B0B0;
    color: black;
   }
   .second{
    background-color: orange;
   }
   
   .third{
    width: 175px;
   }
   
   
   
   
   .home{
    width: 45px;
    height: 45px;
    border-radius: 25px;
    background-color: #B0B0B0;
    margin: 3px auto 0px auto;
    
   }
  </style>
 </head>
 <body>
  <div id="phone">
   <!--開機鍵-->
   <div class="kj"></div>
   <!--音量-->
   <div class="yl"></div>
   <!-- 手機頂部 -->
   <div class="top">
    <!-- 麥克風 -->
    <div class="mkf"></div>
    <!-- 攝像頭 -->
    <div class="sxj"></div>
   </div>
   <!-- 屏幕 -->
   <div class="screen">
    <div class="result-num">
     <span class="sp">0</span>
    </div>
    
    <div class="num">
     <div class="key first" onclick="clearCompute()">AC</div>
     <div class="key first" onclick="deleteLastNum()">←</div>
     <div class="key first">%</div>
     <div class="key second" onclick="fun('/')">/</div>
     <div class="key keynum" onclick="fun(7)">7</div>
     <div class="key keynum" onclick="fun(8)">8</div>
     <div class="key keynum" onclick="fun(9)">9</div>
     <div class="key second" onclick="fun('*')">*</div>
     <div class="key keynum" onclick="fun(4)">4</div>
     <div class="key keynum" onclick="fun(5)">5</div>
     <div class="key keynum" onclick="fun(6)">6</div>
     <div class="key second" onclick="fun('-')">-</div>
     <div class="key keynum" onclick="fun(1)">1</div>
     <div class="key keynum" onclick="fun(2)">2</div>
     <div class="key keynum" onclick="fun(3)">3</div>
     <div class="key second" onclick="fun('+')">+</div>
     <div class="key third keynum" onclick="fun(0)">0</div>
     <div class="key" onclick="fun('.')">.</div>
     <div class="key second" onclick="compute()">=</div>
    </div>
   </div>
   <!-- home鍵 -->
   <div class="home">
    
   </div>
  </div>
  <script type="text/javascript">
   var span = document.querySelector(".sp");
   /**
    * @param {Object} num
    * 點擊數(shù)字鍵盤   將數(shù)字替換到我們的span標簽內(nèi)部
    */
   function fun(num){
    var value = span.innerText;
    if(value == 0){
     span.innerText = num;
    }else{
     span.innerText = span.innerText.concat(num);
    }
   }
   /**
    * 計算結(jié)果的
    */
   function compute(){
    var value = span.innerText;
    var result= eval(value);
    span.innerText = result;
   }
   /**
    * 清空計算區(qū)域  重置為0
    */
   function clearCompute(){
    span.innerText="0";
   }
   /**
    * 刪除計算區(qū)域的最后一個字符
    */
   function deleteLastNum(){
    var value = span.innerText;
    console.log(typeof(value))
    if(value == 0){    
    }
    else{
     /**
      * value是一個字符串
      * zs123
      * 字節(jié)：文本在計算器底層存儲的時候都是字節(jié)存儲的 編碼集  將字符轉(zhuǎn)成特定的字節(jié)在計算機上存儲的
      * 字符：人類能看懂的一個字母 或者一個中文漢字
      *    a  b  中   國      aj
      * 
      * 字符串就是一個一個字符組成的一個集合體  字符串String提供了很多常用的方法  以便我們對這個字符數(shù)組進行相關(guān)操作
      */
     if(value.length!=1){
     span.innerText = value.substring(0,value.length-1)
     }else{
      span.innerText="0";
     }
     
    }
   }
  </script>
 </body>
</html>

效果圖：