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

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

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

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

第三步：利用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>

最终样式如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70]: /images/20221124/6fa65493b00448f2ba6f60369cc13fe7.png