JS implementation of Apple calculator

This article example shares the specific code of JS to implement Apple calculator for your reference. The specific content is as follows

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Mobile Phone</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">
   <!--Power button-->
   <div class="kj"></div>
   <!--Volume-->
   <div class="yl"></div>
   <!-- Top of phone -->
   <div class="top">
    <!-- Microphone -->
    <div class="mkf"></div>
    <!-- Camera -->
    <div class="sxj"></div>
   </div>
   <!-- Screen -->
   <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 button -->
   <div class="home">
    
   </div>
  </div>
  <script type="text/javascript">
   var span = document.querySelector(".sp");
   /**
    * @param {Object} num
    * Click the numeric keyboard to replace the number inside our span tag */
   function fun(num){
    var value = span.innerText;
    if(value == 0){
     span.innerText = num;
    }else{
     span.innerText = span.innerText.concat(num);
    }
   }
   /**
    * Calculation result */
   function compute(){
    var value = span.innerText;
    var result = eval(value);
    span.innerText = result;
   }
   /**
    * Clear the calculation area and reset it to 0
    */
   function clearCompute(){
    span.innerText="0";
   }
   /**
    * Delete the last character in the calculation area*/
   function deleteLastNum(){
    var value = span.innerText;
    console.log(typeof(value))
    if(value == 0){    
    }
    else{
     /**
      * value is a string * zs123
      * Byte: When text is stored in the computer, it is stored in bytes. The encoding set converts characters into specific bytes and stores them on the computer. * Character: A letter or a Chinese character that humans can understand. * ab Chinese aj
      * 
      * A string is a collection of characters. String provides many common methods to enable us to perform related operations on this character array*/
     if(value.length!=1){
     span.innerText = value.substring(0,value.length-1)
     }else{
      span.innerText="0";
     }
     
    }
   }
  </script>
 </body>
</html>

Effect picture:

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: