好资源导航 » 文章资讯 » js实现计算器功能

js实现计算器功能

2023-07-19 01:16:03 226

本文实例为大家分享了js实现计算器功能的具体代码，供大家参考，具体内容如下

知识点

eval()函数可计算某个字符串，并执行其中的的JavaScript代码。

代码如下





js计算器



计算器

.h1{
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:80px0;
border-radius:20px;
box-shadow:4px4px#3d4a65;
}
.btn{
background:rgba(255,192,203,0.8);
border:1pxsolidpink;
cursor:pointer;
outline:none;
font-size:30px;
margin:10px15px;
height:70px;
width:70px;
box-shadow:05px#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:1pxsolid#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="";
});
//运算
functionget(value){
document.getElementById("display").value+=value;
}
//结果
functioncalculates(){
varresult=0;
result=document.getElementById("display").value;
document.getElementById("display").value=eval(result);
}

效果图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

js实现计算器功能

热门推荐

随机推荐