JS实现苹果计算器

本文实例为大家分享了JS实现苹果计算器的具体代码，供大家参考，具体内容如下

!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    * 点击数字键盘   将数字替换到我们的span标签内部    */   function fun(num){
        var value = span.innerText;
    if(value == 0){
         span.innerText = num;
    }
else{
         span.innerText = span.innerText.concat(num);
    }
   }
   /**    * 计算结果的    */   function compute(){
        var value = span.innerText;
        var result= eval(value);
        span.innerText = result;
   }
   /**    * 清空计算区域  重置为0    */   function clearCompute(){
        span.innerText="0";
   }
   /**    * 删除计算区域的最后一个字符    */   function deleteLastNum(){
        var value = span.innerText;
    console.LOG(typeof(value))    if(value == 0){
        }
    else{
     /**      * value是一个字符串      * zs123      * 字节：文本在计算器底层存储的时候都是字节存储的 编码集  将字符转成特定的字节在计算机上存储的      * 字符：人类能看懂的一个字母 或者一个中文汉字      *    a  b  中   国      aj      *       * 字符串就是一个一个字符组成的一个集合体  字符串String提供了很多常用的方法  以便我们对这个字符数组进行相关操作      */     if(value.length!=1){
     span.innerText = value.substring(0,value.length-1)     }
else{
          span.innerText="0";
     }
         }
   }
      /script>
     /body>
    /html>
    

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• js精准的倒计时函数分享
• 超精准的javascript验证身份证号的方法
• js拖拉表格实现内容计算
• js实现一个简易的计算器
• javascript模拟实现计算器
• javascript实现简易计算器功能
• JavaScript 如何计算文本的行数的实现
• JavaScript经典案例之简易计算器
• js精准计算

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！