这款计算器的主要功能有加减乘除，平方开方，清零，回退，连续加减乘除等功能。 成品图如下： 功能模块图如下： 整体用一个table标签创建一个五行六列的表格，这里上HTML代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/style.css"> <title>Document</title> </head> <body> <!--1.加减乘除2.乘方开放3.退格清零4.连加连减--> <table id="calculator" οnclick="result(event)"> <tr> <td colspan="6"> <input type="text" class="content"> </td> </tr> <tr> <td><button class="numb" οnclick="buttonClick(this)" value="1">1</button></td> <td><button class="numb" οnclick="buttonClick(this)" value="2">2</button></td> <td><button class="numb" οnclick="buttonClick(this)" value="3">3</button></td> <td><button class="numb" οnclick="buttonClick(this)" value="+">+</button></td> <td><button class="numb" οnclick="buttonClick(this)" value="(">(</button></td> <td><button class="numb" οnclick="buttonClick(this)" value=")">)</button></td> </tr> <tr> <td><button class="numb" οnclick="buttonClick(this)" svalue="4">4</button></td> <td><button class="numb" οnclick="buttonClick(this)" value="5">5</button></td> <td><button class="numb" οnclick="buttonClick(this)" value="6">6</button></td> <td><button class="numb" οnclick="buttonClick(this)" value="-">-</button></td> <td><button class="numb" οnclick="buttonClick(this)" value="C">C</button></td> <td><button class="numb" οnclick="buttonClick(this)" value="Back">Back</button></td> </tr> <td><button class="numb" οnclick="buttonClick(this)" value="7">7</button></td> <td><button class="numb" οnclick="buttonClick(this)" value="8">8</button></td> <td><button class="numb" οnclick="buttonClick(this)" value="9">9</button></td> <td><button class="numb" οnclick="buttonClick(this)" value="*">*</button></td> <td><button class="numb" οnclick="buttonClick(this)">x<sup>2</sup></button></td> <td rowspan="2"><button class="numb" οnclick="buttonClick(this)" value="=">=</button></td> </tr> <tr> <td><button class="numb" οnclick="buttonClick(this)" value=".">.</button></td> <td><button class="numb" οnclick="buttonClick(this)" value="0">0</button></td> <td><button class="numb" οnclick="buttonClick(this)" value="00">00</button></td> <td><button class="numb" οnclick="buttonClick(this)" value="/">/</button></td> <td><button class="numb" οnclick="buttonClick(this)">√x</button></td> </tr> </table> <div id="audio-box"></div> <script src="js/calculator.js"></script> </body> </html>下面是CSS代码：
* { margin: 0; padding: 0; } /*body背景色*/ body { width: 100%; background: -webkit-linear-gradient(left, #2b5876, #4e4376); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(left, #2b5876, #4e4376); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(left, #2b5876, #4e4376); /* Firefox 3.6 - 15 */ background: linear-gradient(left, #2b5876, #4e4376); /* 标准的语法（必须放在q最后） */ } /*table部分*/ table { width: 460px; height: 470px; margin: 100px auto; } table tr { width: 100%; height: 20%; } table tr td { box-sizing: border-box; width: 16.66%; font-size: 20px; color: #d7d2cc; text-align: center; cursor: pointer; box-shadow: 0px 0px 4px #F7F7F9 inset; } table tr button { width: 100%; height: 100%; outline: none; background-color: transparent; border: none; font-size: 20px; color: #d7d2cc; cursor: pointer; } table tr button:hover { opacity: 0.6; background: linear-gradient(45deg, #2b5876, #4e4376); } /*屏幕显示部分*/ table td input { width: 100%; height: 100%; background-color: transparent; border: none; outline: none; cursor: pointer; font-size: 20px; color: #d7d2cc; text-align: right; }然后是JS部分，主要是注册一个点击事件，通过获取触发事件的innerHTML来判断接下来的操作 具体代码：
//计算功能 function result(e) { //获取触发事件的元素 //利用e.target||e.srcElement，获取到触发事件的元素，||连接两个语法是为了解决不同浏览器的兼容性问题。 var obj = e.target || e.srcElement; if (obj.nodeName != "BUTTON") { return; } var v = obj.innerHTML; var content = document.querySelector('.content'); if (v === "C") { content.value = 0; } else if (v === "=") { //获取到输入框的值 var exp = content.value; //这里用try catch抛出异常，针对运算错误的情况 try { var result = eval("(" + exp + ")"); //将计算结果赋值给输入框 content.value = result; } catch (e) { console.log(e); content.value = "error"; } } else if (v === "x<sup>2</sup>") { var result = Math.pow(content.value, 2); content.value = result; } else if (v === "√x") { var result = Math.sqrt(content.value); content.value = result; } else if (v === "Back") { var str = content.value; var result = str.substring(0, str.length - 1); content.value = result; } else { if (content.value === "0") content.value = " "; content.value += v; } } function buttonClick(obj) { //点击键有声音效果 document.querySelector('#audio-box').innerHTML = "<audio src='music/cNumber.mp3' controls='controls' autoplay='autoplay' style='display:none;'></audio>"; }