利用原生javascript制作简易计算器-蒲公英云

利用原生javascript制作简易计算器

港控/mmm° 2022-11-25 11:43 306阅读 0赞

第一步：利用html构建好计算器的大概形状样式

<table>
    <tr>
        <td colspan="4" ><input  id="text" type="text" value="0"  /></td>
    </tr>
    <tr>
        <td colspan="2"><button class="btn">del</button></td>
        <td colspan="2"><button class="btn">c</button></td>
    </tr>
    <tr>
        <td><button class="btn">9</button></td>
        <td><button class="btn">8</button></td>
        <td><button class="btn">7</button></td>
        <td><button class="btn">+</button></td>
    </tr>
    <tr>
        <td><button class="btn">6</button></td>
        <td><button class="btn">5</button></td>
        <td><button class="btn">4</button></td>
        <td><button class="btn">-</button></td>
    </tr>
    <tr>
        <td><button class="btn">3</button></td>
        <td><button class="btn">2</button></td>
        <td><button class="btn">1</button></td>
        <td><button class="btn">*</button></td>
    </tr>
    <tr>
        <td><button class="btn">0</button></td>
        <td><button class="btn">.</button></td>
        <td><button class="btn">=</button></td>
        <td><button class="btn">/</button></td>
    </tr>
</table>

第二步：利用css对其进行修饰加工

<style>
        *{ 
            padding:0;
            margin:0;
        }
        table{ 
            width:400px;
            margin:auto;
            border:1px solid silver;
            border-collapse: collapse;/*列与列的间距*/
        }
       td { 
           width: 100px;
           border: 1px solid #525252;
       }
        td input{ 
            width:98.7%;
            height:60px;
            outline: none;
            text-align: right;
            font-size: 20px;
            background: rgba(251, 255, 227, 0.81);
        }
        td button{ 
            width:100%;
            height:60px;
            font-size: 22px;
            background: rgba(251, 223, 255, 0.81);
        }
    </style>

第三步：利用js写出计算器的基本功能

//获取按钮
    var buttonal=document.getElementsByClassName ("btn");
    var textal=document.getElementById("text");
    var res=[];  //定义一个数组存储输入的值
    var label=false;
    for(var i=0;i<buttonal.length;i++){ 
        buttonal [i].onclick=addclick;
        function addclick(){ 
            //输入为数字或者为“.”
            if(!isNaN(this.innerHTML) || this.innerHTML=="."){ 
                //文本框初值不为0
                label = true;
                if(textal.value!== "0"){ 
                    //文本框中含有“.”
                    if(textal.value.indexOf(".")!==-1){ 
                        //处理点重复的问题 文本框里面有点 不上去点（用户按的数字 得加 用户按的是点 不加）
                        //输入"."时
                        if(this.innerHTML!== "."){ 
                            textal.value+=this.innerHTML;
                        }
                    }
                    else{ 
                        textal.value+=this.innerHTML;
                    }
                }
                //文本框初值为0
                else{ 
                  if(this.innerHTML =="."){ 
                      textal.value="0"+this.innerHTML ;
                  }
                  else{ 
                      textal.value=this.innerHTML;
                  }
                }
            }
            //非数字
            else{ 
              switch(this.innerHTML ) { 
                  case "+" :save(this);
                            break;
                  case "-" :save(this);
                            break;
                  case "/" :save(this);
                            break;
                  case "*":save(this);
                            break;
                  case "=":
                            res.push(textal.value);
                            var result=eval(res.join(""));
                            if(result =="Infinity"){ 
                             remove_add ("remove");
                            }
                            textal.value=result==Infinity?"除数不能为零":result;
                            //console.log(res.join(""));
                            res=[];
                            break;
                  case "del":
                            //从后往前一个一个的减数字 substr(start,count) substring(start,end) end不取
                             textal.value = textal.value.length==1 ? "0":textal.value.substr(0,textal.value.length-1);
                             break;
                  case "c":
                             textal.value="0";
                            res=[];
                            remove_add("add");
                            break;
              }
            }
        }
    }
    function save(mini){ 
        //清屏之前存储用户按的值
       // 确认一个条件 用户是连续按符号 还是数字+符号
        if(!label){    //连续两次按符号时
            res[res.length-1]=mini.innerHTML ;  //第二次按的符号替代第一次的
        }
        else{ 
            res.push(textal.value );
            res.push(mini.innerHTML );
        }
        textal.value="0";
        label=false;
    }
    //卸载除c以外的所有元素的事件
     function remove_add(p){ 
         for(var i=0;i<buttonal.length;i++){ 
            if(p == "add"){ 
                buttonal[i].onclick = addclick;
            }
            else{ 
                if(buttonal[i].innerHTML!="c"){ 
                    buttonal[i].onclick = null;
                }
            }
         }
     }
</script>