本文介绍如何使用JavaScript、HTML和CSS构建一个简易计算器。核心知识点包括利用eval()函数执行字符串中的JS代码以实现运算逻辑。文章提供了完整的HTML结构、CSS样式表及JS交互代码，涵盖数字输入、清空功能及结果计算，适合前端初学者参考学习。
JavaScript计算器实现概述
本文分享了一个使用JavaScript实现计算器功能的具体代码示例，供读者参考学习。
核心知识点
主要涉及eval()函数，该函数用于计算字符串表达式，并执行其中包含的JavaScript代码。
代码实现与结构分析
具体实现代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js计算器</title>
<link href="../css/计算器.css" rel="stylesheet">
</head>
<body>
<h1 class="h1">计算器</h1>
<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>
.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: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);
}运行效果如图所示
以上就是本文的全部内容，希望上述代码能对读者的学习有所帮助，同时也欢迎大家继续支持本站获取更多资源。