小编给大家分享一下js中实现计算器功能的案例，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
本文实例为大家分享了js实现计算器功能的具体代码，供大家参考，具体内容如下
知识点
eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。
代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js计算器</title> <link href="../css/计算器.css" rel="stylesheet"> </head> <body> <h2 class="h2">计算器</h2> <div class="box"> <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 src="../js/计算器.js"> </script> </body> </html>
.h2{
position: relative;
color:blueviolet;
font-size:50px;
text-align: center;
top:50px;
}
.box{
width:500px;
position: relative;
top: 100px;
left:50%;
margin-left: -250px;
text-align: center;
background: #495678;
padding:80px 0;
border-radius: 20px;
box-shadow: 4px 4px #3d4a65;
}
.btn{
background:rgba(255,192,203,0.8);
border: 1px solid pink;
cursor:pointer;
outline:none;
font-size:30px;
margin:10px 15px;
height: 70px;
width: 70px;
box-shadow: 0 5px #1a1313de;
}
.btn:active{
transform: translateY(2px);
}
.btn:first-child{
margin-left:-300px;
}
#display{
overflow: hidden;
box-sizing: border-box;
padding-right:18px;
text-align: right;
outline: none;
border:1px solid #4caf50;
color:yellow;
font-size: 30px;
width:280px;
position: absolute;
height: 50px;
top:95px;
right:55px;
background-color: #4caf50;
}
#display,.btn,.box{
border-radius:35px;
}
.operator{
background:orange;
}
.other{
background:white;
}//清空
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 = eval(result);
}效果图
以上是js中实现计算器功能的案例的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
