爱站程序员基地第一步：利用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==\".\"){//文本框初值不为0label = true;if(textal.value!== \"0\"){//文本框中含有“.”if(textal.value.indexOf(\".\")!==-1){//处理点重复的问题 文本框里面有点 不上去点（用户按的数字 得加 用户按的是点 不加）//输入\".\"时if(this.innerHTML!== \".\"){textal.value+=this.innerHTML;}}else{textal.value+=this.innerHTML;}}//文本框初值为0else{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>
最终样式如下：
