这篇文章主要为大家展示了“JavaScript如何实现计算器”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“JavaScript如何实现计算器”这篇文章吧。
一、实例代码
HTML：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style></head><body> <div class="center"> <h2>计算器</h2> <a href="https://github.com/guuibayer/simple-calculator" rel="external nofollow" target="_blank"><i class="fa fa-github"></i></a> <form name="calculator"> <input type="button" id="clear" class="btn other" value="C"> <input type="text" id="display"> <br> <input type="button" class="btn number" value="7" onclick="get(this.value);"> <input type="button" class="btn number" value="8" onclick="get(this.value);"> <input type="button" class="btn number" value="9" onclick="get(this.value);"> <input type="button" class="btn operator" value="+" onclick="get(this.value);"> <br> <input type="button" class="btn number" value="4" onclick="get(this.value);"> <input type="button" class="btn number" value="5" onclick="get(this.value);"> <input type="button" class="btn number" value="6" onclick="get(this.value);"> <input type="button" class="btn operator" value="*" onclick="get(this.value);"> <br> <input type="button" class="btn number" value="1" onclick="get(this.value);"> <input type="button" class="btn number" value="2" onclick="get(this.value);"> <input type="button" class="btn number" value="3" onclick="get(this.value);"> <input type="button" class="btn operator" value="-" onclick="get(this.value);"> <br> <input type="button" class="btn number" value="0" onclick="get(this.value);"> <input type="button" class="btn operator" value="." onclick="get(this.value);"> <input type="button" class="btn operator" value="/" onclick="get(this.value);"> <input type="button" class="btn other" value="=" onclick="calculates();"> </form> </div> <script> </script></body></html>CSS：
* { border: none; font-family: 'Open Sans', sans-serif; margin: 0; padding: 0;} .center { background-color: #fff; border-radius: 50%; height: 600px; margin: auto; width: 600px;}h2 { color: #495678; font-size: 30px; margin-top: 20px; padding-top: 50px; display: block; text-align: center; text-decoration: none;}a { color: #495678; font-size: 30px; display: block; text-align: center; text-decoration: none; padding-top: 20px;}form { background-color: #495678; box-shadow: 4px 4px #3d4a65; margin: 40px auto; padding: 40px 0 30px 40px; width: 280px; }.btn { outline: none; cursor: pointer; font-size: 20px; height: 45px; margin: 5px 0 5px 10px; width: 45px;}.btn:first-child { margin: 5px 0 5px 10px;}.btn, #display, form { border-radius: 25px;}#display { outline: none; background-color: #98d1dc; box-shadow: inset 6px 6px 0px #3facc0; color: #dededc; font-size: 20px; height: 47px; text-align: right; width: 165px; padding-right: 10px; margin-left: 10px;}.number { background-color: #72778b; box-shadow: 0 5px #5f6680; color: #dededc;}.number:active { box-shadow: 0 2px #5f6680; -webkit-transform: translateY(2px); -ms-transform: translateY(2px); -moz-tranform: translateY(2px); transform: translateY(2px); }.operator { background-color: #dededc; box-shadow: 0 5px #bebebe; color: #72778b;}.operator:active { box-shadow: 0 2px #bebebe; -webkit-transform: translateY(2px); -ms-transform: translateY(2px); -moz-tranform: translateY(2px); transform: translateY(2px);}.other { background-color: #e3844c; box-shadow: 0 5px #e76a3d; color: #dededc;}.other:active { box-shadow: 0 2px #e76a3d; -webkit-transform: translateY(2px); -ms-transform: translateY(2px); -moz-tranform: translateY(2px); transform: translateY(2px);}JavaScript：
document.getElementById("clear").addEventListener("click", function() { document.getElementById("display").value = ""; }); function get(value) { document.getElementById("display").value += value; } function calculates() { var result = 0; result = document.getElementById("display").value; document.getElementById("display").value = ""; document.getElementById("display").value = eval(result); };二、实例演示
页面加载后，显示一个计算器的页面，可以进行正常的四则运算
运算结果：
也可以归零，加小数等等操作
三、实例剖析
方法解析
document.getElementById("display").value = eval(result);eval() 函数计算 JavaScript 字符串，并把它作为脚本代码来执行。
如果参数是一个表达式，eval() 函数将执行表达式。如果参数是Javascript语句，eval()将执行 Javascript 语句。
实例执行原理解析：
document.getElementById("clear").addEventListener("click", function() { document.getElementById("display").value = "";});监听归零键的click操作，点击则归零键则执行代码把display输入框清空
function get(value) { document.getElementById("display").value += value; }每个键上onclick属性绑定函数get()，点击相应键则把相应键的值添加到display输入框中，直接做字符串的追加
function calculates() { var result = 0; result = document.getElementById("display").value; document.getElementById("display").value = ""; document.getElementById("display").value = eval(result);};核心计算函数，首先获取输入框display的字符串，然后清空输入框，调用eval()函数计算表达式的值后再赋给输入框display，实现计算器的简易功能
以上是“JavaScript如何实现计算器”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！
