手写原生js实现简单计算器的功能

最新推荐文章于 2022-11-09 00:19:58 发布

前端图形

最新推荐文章于 2022-11-09 00:19:58 发布

阅读量402

点赞数 1

分类专栏： demo 文章标签：计算器

本文链接：https://blog.csdn.net/suandfei/article/details/103151638

版权

demo 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

话不多说直接看图片
在这里插入图片描述
其实核心思想就是用了一个eval 函数里面可以解析带运算符的字符串但是一定要吧除号和乘号替换成代码里的* 和/ 其他就没有什么了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
     <style>
       ul{
           list-style: none;
           display: flex;
           width: 100px;
           margin-left:-34px;
           margin-top:3px;
       }

       li{
           margin-right:10px;
           width: 14px;
           height: 14px;
           border-radius: 50%;
       }
       li+li{
           margin-right:10px;
       }
       ul>li:nth-child(1){
          margin-right: 10px;
        background-color: #ff5351;
       }
       ul>li:nth-child(2){
        background-color: #ffbb41;
       }
       ul>li:nth-child(3){
        background-color: #0bc84d;
       }
       #input{
           height: 80px;
           width: 231px;
           background-color: #3c3d3a;
           overflow: hidden;
       }
       span{
           font-size:40px;
          
           float:right;
           color:white;
           position: relative;
           top:-10px;
           right:11px;
       }
       table{
        border-spacing: 0px;
        width: 231px;
       }
        table>tbody>tr:first-child>td{
           width: 57px;
           height: 49px;
           background-color: #4e4f4c;
           padding: 0px;
           border-right:1px solid #3c3d38;
           border-bottom:1px solid #3c3d38;
           color:white;
           text-align: center;
           vertical-align: center;
           font-size:20px;
       }
       table>tbody>tr>td:last-child{
           background-color: #ff9d2a;
           border:0px;
         
           border-bottom:1px  solid  #3c3d38;
           font-size:28px;
       }
       #first>td{
           font-size:15px;
       }
       tr#first>td:last-child{
           font-size:30px;
       }
      
        table>tfoot>tr>td{
           width: 57px;
           height: 49px;
           background-color: #6b6b69;
           border-right:1px solid #3c3d38;
           border-bottom:1px solid #3c3d38;
           color:white;
           text-align: center;
           font-size:20px;
       }
       table>tbody>tr>td{
           width: 57px;
           height: 49px;
           background-color: #6b6b69;
           padding:0px;
           border-right:1px solid #3c3d38;
           border-bottom:1px solid #3c3d38;
           color:white;
           text-align: center;
           vertical-align: center;
           font-size:20px;
       }
       table>tfoot>tr>td:last-child{
           background-color: #ff9d2a;
           border:0px;
         
           border-bottom:1px  solid  #3c3d38;
           font-size:28px;
       }
       table>tfoot>tr>td:nth-child(2){
           border-left:0px;
       }
       table>tfoot>tr>td:nth-child(1){
           border-right:0px;
       }
    
     </style>
</head>
<body>
        <div id="input">
               
                 <ul>
                     <li></li>
                     <li></li>
                     <li></li>
                 </ul>
              <span id="show"></span>
            </div>
    <div id="calc"> 
      
      <div id="methods">
            <table >
               
                <tbody>
                    <tr id="first">
                        <td>AC</td>
                        <td>+/-</td>
                        <td>%</td>
                        <td>÷</td>
                    </tr>

                            <tr>
                                <td>7</td>
                                <td>8</td>
                                <td>9</td>
                                <td>×</td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>5</td>
                                <td>6</td>
                                <td>-</td>
                            </tr>
                            <tr>
                                <td>1</td>
                                <td>2</td>
                                <td>3</td>
                                <td>+</td>
                            </tr>
                </tbody>
               
             <tfoot>
                <tr>
                    <td>0</td>
                    <td ></td>
                    <td>.</td>
                    <td>=</td>
                </tr>
               </tfoot>
                
            </table>
      </div>
    </div>
    <script>
    // 获取表格标签 并为表格标签绑定事件函数 子元素通过冒泡共享父元素的函数
     var table=document.getElementsByTagName("table")[0]
       var show=document.getElementById("show")
          var fragment=`     <span id="add">+</span>
                            <span id="medium">/</span>
                            <span id="minus">-</span> `
       table.onclick=function(e){
        //   用e.target 代替this 获得目标元素
          var  td=e.target;
              console.log(td.innerHTML)
            if(td.nodeName=="TD"){
               switch(td.innerHTML){
                   case "AC": 
                     
                     show.innerHTML=""
                     break;
                   case '.':
                       if(show.innerHTML.length!=0){
                            show.innerHTML+="."
                       }
                        
                         break;

                   case "=": 
                     if(show.innerHTML!==""){
                        
                         try{
                               if(show.innerHTML.indexOf("×")!=-1 ||show.innerHTML.indexOf("÷")!=-1 ){
                                //    乘法的时候  将显示屏中所有的乘号都替换成*
                                   var str=show.innerHTML.replace(/×/g,"*")
                                     str1=str.replace(/÷/g,"/")
                                    
                                       show.innerHTML=str1
                               }
                               
                             show.innerHTML=eval(show.innerHTML)
                             
                         }catch(err){
                             show.innerHTML=err
                         }
                     }  
                    break;
                    case "": 
                         e.stopPropagation()
                         break;
                    case "+/-": 
                          show.innerHTML="-"+ show.innerHTML
                          break;
                    //    其他的td 
                default: 
                    show.innerHTML+=td.innerHTML
               }
            

          } 

         
       }
       
    






    
    </script>
</body>
</html>``