先来看看运行效果：
具体代码如下：
<!DOCTYPE html> <html> <meta content="text/html; charset=UTF-8"> <head> <title> 计算器 Calculator</title> <!--将按键内容以字符串形式存储在文字框中当按钮为“=”时，调用eval方法计算结果然后将结果输出文字框中--> <script type="text/javascript"> var numresult; var str; function onclicknum(nums) { str = document.getElementById("nummessege"); str.value = str.value + nums; } function onclickclear() { str = document.getElementById("nummessege"); str.value = ""; } function onclickresult() { str = document.getElementById("nummessege"); numresult = eval(str.value); str.value = numresult; } </script> </head> <body bgcolor="affff" > <!--定义按键表格,每个按键对应一个事件触发--> <table bgColor="#bbff77"> <tr> <td colspan="4"> <input type="text" /> </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="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="7"> </td> <td> <input type="button" value="8"> </td> <td> <input type="button" value="9"> </td> <td> <input type="button" value="*"> </td> </tr> <tr> <td colspan="2"> <input type="button" value="0"> </td> <td> <input type="button" value="."> </td> <td> <input type="button" value="https://www.jb51.net/"> </td> </tr> <tr> <td colspan="2"> <input type="button" value="Del" /> </td> <td colspan="2"> <input type="button" value="=" /> </td> </tr> </table> </body> </html>
PS：这里再为大家推荐几款计算工具供大家进一步参考借鉴：
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript操作DOM技巧总结》及《JavaScript字符与字符串操作技巧总结》