利用javascript制作计算器
前面我们讲到如何用js模拟计算器的基本运算，现在咱们来讲一下如何使用HTML+CSS+javascript制作一个功能齐全，切外观大气的计算器。功能效果如下图所示：
在这里插入图片描述
HTML代码：
<table><tr><tdcolspan="5"><inputtype="text"id="text"></td></tr><tr><td><buttonvalue="7"id="num7"onclick="func(this)">7</button></td><td><buttonvalue="8"id="num8"onclick="func(this)">8</button></td><td><buttonvalue="9"id="num9"onclick="func(this)">9</button></td><td><buttonvalue="AC"id="ac">AC</button></td><td><buttonvalue="C"id="c">C</button></td></tr><tr><td><buttonvalue="4"id="num4"onclick="func(this)">4</button></td><td><buttonvalue="5"id="num5"onclick="func(this)">5</button></td><td><buttonvalue="6"id="num6"onclick="func(this)">6</button></td><td><buttonid="sub"value="-"onclick="func(this)">-</button></td><td><buttonid="ride"value="*"onclick="func(this)">×</button></td></tr><tr><td><buttonvalue="1"id="num1"onclick="func(this)">1</button></td><td><buttonvalue="2"id="num2"onclick="func(this)">2</button></td><td><buttonvalue="3"id="num3"onclick="func(this)">3</button></td><tdrowspan="2"><buttonid="add"value="+"onclick="func(this)">+</button></td><td><buttonid="devide"value="/"onclick="func(this)">÷</button></td></tr><tr><td><buttonvalue="0"id="num0"onclick="func(this)">0</button></td><td><buttonvalue="00"id="num00"onclick="func(this)">00</button></td><td><buttonvalue="."id="point"onclick="func(this)">.</button></td><td><buttonvalue="="id="equal">=</button></td></tr></table>
注意：每个button中都要设置与标签文本内容相对应的value值，方便后面调用。
CSS代码：
* { margin: 0; padding: 0; } table{ margin: 20pxauto; background: url("car.jpg") no-repeatcenter/100%100%; } table,td { border: 1pxsolidskyblue; } 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.获取元素varaBtns=document.getElementsByTagName("button"); console.log(aBtns); varoText=document.getElementById("text"); varoCle=document.getElementById("ac"); varoEqual=document.getElementById("equal"); varoDel=document.getElementById("c"); // 2.定义全局变量 存储结果varres=""; // 3.编辑方法// aBtns[0].οnclick=function(){// res+=aBtns[0].value;// oText.value=res;// }// aBtns[1].οnclick=function(){// res+=aBtns[1].value;// oText.value=res;// }//封装方法 将可变化的量用参数表示 functionfunc(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属性。
| 属性或方法 | 描述 | 属性或方法 |
| length | 返回字符串的长度 | length |
关注我，学习前端知识不迷路。
视频讲解链接：
1.https://www.bilibili.com/video/BV11V411k73M/
