用Javascript实现一个基本的运算器，具体内容如下
使用表格布局，JS添加事件
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>计算器</title> </head> <style> *{ margin: 0; padding: 0; } table{ width:400px; height: 600px; border-collapse: collapse; margin: auto; } .trr{ width: 400px; height: 100px; } .trr1{ width: 400px; height: 50px; } .tdd{ width: 100px; height: 100px; border: 1px solid silver; text-align: center; line-height: 100px; } .btn{ width: 100%; height: 100%; font-size: 2.5em; } .btn1{ width: 100%; height: 100%; font-size: 2.5em; } .tdd1{ width: 100px; height: 50px; } .text{ height: 100%; font-size: 2.5em; text-align: right; } </style> <body> <table> <tr> <td colspan="4"><input type="text" disabled value="0" /></td> </tr> <tr> <td colspan="2"><input type="button" value="c"/></td> <td colspan="2"><input type="button" value="d"/></td> </tr> <tr> <td><input type="button" value="7"/></td> <td><input type="button" value="8"/></td> <td><input type="button" value="9"/></td> <td><input type="button" value="https://www.jb51.net/"/></td> </tr> <tr> <td><input type="button" value="4"/></td> <td><input type="button" value="5"/></td> <td><input type="button" value="6"/></td> <td><input type="button" value="*"/></td> </tr> <tr> <td><input type="button" value="1"/></td> <td><input type="button" value="2"/></td> <td><input type="button" value="3"/></td> <td><input type="button" value="-"/></td> </tr> <tr> <td><input type="button" value="0"/></td> <td><input type="button" value="."/></td> <td><input type="button" value="+"/></td> <td><input type="button" value="="/></td> </tr> </table> <script> var obtn=document.getElementsByClassName("btn"); var otext=document.getElementsByClassName("text")[0]; var arr=[];//定义一个数组，向其中存入数字和运算符。 for(var i=0;i<obtn.length;i++){ obtn[i].onclick= function () { if(!isNaN(this.value)||this.value=="."){ //this:代表鼠标点击的obtn if(otext.value.indexOf(".")==-1){ //消除重复"."的BUG if(otext.value.length==0){ if(this.value!="0"){ //---------------------- otext.value+=this.value; //| } //| } //| else if(otext.value.length==1&&otext.value=="0"){//| otext.value=this.value; //| } //| else if(otext.value.length==1&&otext.value!="0"){//初始状态时，若计算器屏幕为"0", otext.value+=this.value; //实现输入一个非零数字的时候，计算器 } //上的数值替换为输入的非零值 else if(otext.value.length>1){ //| otext.value+=this.value; //| } //-------------------- } else { if(this.value!="."){ //消除重复"."的BUG if(otext.value.length==0){ if(obtn[i].value!="0"){ otext.value+=this.value; } } if(otext.value.length>=1){ otext.value+=this.value; } } } } if(this.value=="https://www.jb51.net/"||this.value=="*"||this.value=="+"||this.value=="-"){ if(otext.value!="0"&&otext.value!=""&&otext.value!="-"){ //消除输入重复运算符的BUG， arr[arr.length]=otext.value; //当输入一个运算符的时候，otext内的value值 arr[arr.length]=this.value; //为""(空)，所以判断条件为若otext内的value值不为空 otext.value=""; //则向数字中传值。 } //此时出现无法输入负数值运算的BUG else if(otext.value==""&&this.value=="-"){ //消除无法输入负数值运算的BUG otext.value=this.value; //当点击运算符后otext的value值为空， } //此时判断若this的值为"-",就替换进去。 else if(otext.value=="0"&&this.value=="-"){//此时出现无法执行类似"3--3"的双减法运算BUG， otext.value=this.value; //因为eval()无法识别有双减的字符串值。 } //若初始时，otext值为"0"，并且this的值为 } //"-",则用"-"替换otext中的值。 if(this.value=="="){ if(otext.value.length>=1){ //-------------------- var string=""; //| if(arr[arr.length-1]=="-"&&otext.value<0){ //→消除无法执行类似"3--3"的双减法运算的BUG arr[arr.length-1]="+"; //→当输入负数值的时候，判断arr数组中的 otext.value=Math.abs(otext.value); //→末尾值是否为"-"，若为"-"则把其改为"+", } //→并且让otext.value值取绝对值。 arr[arr.length]=otext.value; //| for(var i=0;i<arr.length;i++){ //| string+=arr[i]; //| } //|把存入数组中的数字和运算符遍历存储到一个字符串中， otext.value=eval(string); //|直接使用eval()方法就可以识别一个的字符串，执行 arr=[]; //|该字符串中的运算 } //| } //--------------------- if(this.value=="c"){ otext.value="0"; arr=[]; } if(this.value=="d"){ otext.value=otext.value.substr(0,otext.value.length-1);//每一次删除otext中的末尾值 if(otext.value==""){ //当把otext中的值删除完后，给 otext.value="0"; //otext复值"0". } } } } </script> </body> </html>
计算器的”c”功能为清屏；”d”功能为删除一个数；