史上最好看的利用javascript制作计算器

柔情只为你懂 2023-03-12 09:23 95阅读 0赞

## 利用javascript制作计算器 ##

前面我们讲到如何用js模拟计算器的基本运算，现在咱们来讲一下如何使用HTML+CSS+javascript制作一个功能齐全，切外观大气的计算器。功能效果如下图所示：

![在这里插入图片描述][20200514213138223.gif_pic_center]

**HTML代码：**

**注意：每个button中都要设置与标签文本内容相对应的value值，方便后面调用。**

**CSS代码：**

* { 
            margin: 0;
            padding: 0;
        }
        table{ 
            margin: 20px auto;
            background: url("car.jpg") no-repeat center/100% 100%;
        }
    
        table,td { 
            border: 1px solid skyblue;
        }
    
        td { 
            width: 20%;
        }
    
        input[type=text] { 
            width: 400px;
            height: 50px;
            font-size: 35px;
        }
    
        button { 
            width: 100%;
            height: 40px;
            font-size: 20px;
            font-weight: 900;
        }
    
        button#add { 
            height: 84px;
        }
        button,input{ 
            opacity: 0.8;
        }

**注意：css在设置时，将 input 和 button 的不透明度调成了0.8，为了看到后面的背景。**

**JavaScript代码：**

// 1.获取元素
        var aBtns = document.getElementsByTagName("button");
        console.log(aBtns);
        var oText = document.getElementById("text");
        var oCle = document.getElementById("ac");
        var oEqual = document.getElementById("equal");
        var oDel=document.getElementById("c");
        // 2.定义全局变量 存储结果
        var res = "";
    
        // 3.编辑方法
        // aBtns[0].οnclick=function(){ 
        // res+=aBtns[0].value;
        // oText.value=res;
        // }
        // aBtns[1].οnclick=function(){ 
        // res+=aBtns[1].value;
        // oText.value=res;
        // }
        
        //封装方法 将可变化的量用参数表示 
        function func(x) { 
            res += x.value;
            oText.value = res;
        }
        
        
        // aBtns[0].οnclick=function(){ 
        // func(aBtns[0])
        // }
        // aBtns[1].οnclick=function(){ 
        // func(aBtns[1])
        // }
    
        // 功能代码
    
        // 清空方法
        oCle.onclick = function () { 
            oText.value = "";
            res="";
        }
        // 求值
        oEqual.onclick=function(){ 
            res= eval(res);
            oText.value=res;
        }
        // 删除
        oDel.onclick=function(){ 
            res=res.substring(0,res.length-1);
            oText.value=res;
        }
    
        // 字符串
        // 属性：length 获取字符串的长度
        // 方法：subString(字符起始位置,结束位置) 截取字符串 留头不留尾
    
        // var str="hello world";
        // console.log(str.length);
        // console.log(str.substring(0,str.length-1));
    
        // 4.获取值
    
        // var num=10;
        // num+=2;//num=num+2 x+=y x=x+y
        // console.log(num);

**注意：js代码的编写过程中稍微有些难度就是如何实现点击 C 按钮时，输入框中删掉末尾一个字符。此部分功能实现用到了字符串的subString()方法及length属性。**

<table> 
 <thead> 
  <tr> 
   <th>属性或方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>length</td> 
   <td>返回字符串的长度</td> 
  </tr> 
  <tr> 
   <td>substring()</td> 
   <td>提取字符串中两个指定的索引号之间的字符</td> 
  </tr> 
 </tbody> 
</table>

**关注我，学习前端知识不迷路。**

**视频讲解链接：  
1.https://www.bilibili.com/video/BV11V411k73M/**

[20200514213138223.gif_pic_center]: /images/20230312/edf379c2f6df4eda9ace9e4c968f9c35.png