本文详细介绍如何使用JavaScript制作一个简易计算器。内容涵盖数据类型转换、文本框数据获取与赋值、有参函数定义及数值判断。核心逻辑通过TNumber累加输入、Clear清除状态、Calculator利用eval计算结果实现，并附带完整HTML与JS代码示例供参考。
本文分享了一段JavaScript实现简易计算器的完整代码示例，供读者学习参考。
1. 任务要求
1）掌握数据的类型转换
2）学会获取文本框控件的数据以及给相应控件赋值
3）掌握有参函数的定义
4）学会使用数值判断函数
5）学会使用eval()方法编译字符串算式
2. 需求说明
实现如图所示的计算器界面，用户点击页面上的数字和运算符即可执行相应运算，点击“AC”按钮可清空屏幕显示内容。
3. 实现思路
1）在TNumber函数中处理输入数据的累加，为后续计算做准备。
2）定义变量sum，用于累加每次点击按钮的值，以便最终输出完整的运算表达式。
3）在Clear函数中，点击“AC”按钮时清空文本框txt的内容，并将sum重置为空字符串。
4）在Calculator函数中，调用eval()函数对最终结果进行计算并显示。
4.实现思路（JS部分的代码）
<script type="text/javascript">
var sum="";
function TNumber(value){
document.getElementById("txt").value+=value;
sum+=value;
}
function Clear(){
document.getElementById("txt").value="";
sum="";
sum1="";
}
function Calculator(){
document.getElementById("txt").value=sum+"="+eval(sum);
}
</script>5. 运行结果
6. 全部代码（其中的图片需要注意一下）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算器</title>
<style type="text/css">
#calculator
{
margin: 0 auto;
border: #000 2px solid;
border-radius: 15px 15px 15px 15px;
width: 300px;
height: 460px;
background-image: url(img/background5.jpg);//url图片需要自己设定
}
#hiddentxt
{
height: 100px;
}
#txt
{
width: 88%;
height: 80px;
border-radius: 12px 12px 12px 12px;
font-size: 24px;
font-weight: bold;
background: #F4F4F4;
color: #080808;
border: black 5px solid;
margin-top: 15px;
margin-left:12px;
font-family: "Comic Sans MS", "Leelawadee UI";
}
input[type=button]
{
width: 56px;
height: 56px;
margin-top: 10px;
margin-left: 13px;
border-radius: 10px;
font-size: 20px;
font-weight: bold;
background: #fff;
font-family:"Comic Sans MS";
}
#Zero,#AC
{
width: 129px;
}
input[type=button]:hover
{
color: #fff;
background: #000;
animation-name:mybutton;
animation-duration: 0.8s;
animation-timing-function:ease-in-out;
}
@keyframes mybutton
{
0%
{
background: #fff;
color: #000;
}
100%
{
background:#000;
color: #fff;
}
}
</style>
</head>
<body>
<div id="calculator">
<input type="text" id="txt" readonly><br>
<input type="button" id="AC" value="AC" onClick="Clear()">
<input type="button" onClick="TNumber(this.value)" value="/">
<input type="button" onClick="TNumber(this.value)" value="%">
<br>
<input type="button" id="Seven" onClick="TNumber(this.value)" value="7">
<input type="button" id="Eight" onClick="TNumber(this.value)" value="8">
<input type="button" id="Nine" onClick="TNumber(this.value)" value="9">
<input type="button" onClick="TNumber(this.value)" value="+">
<br>
<input type="button" id="Four" onClick="TNumber(this.value)" value="4">
<input type="button" id="Five" onClick="TNumber(this.value)" value="5">
<input type="button" id="Six" onClick="TNumber(this.value)" value="6">
<input type="button" onClick="TNumber(this.value)" value="-">
<br>
<input type="button" id="One" onClick="TNumber(this.value)" value="1" >
<input type="button" id="Two" onClick="TNumber(this.value)" value="2" >
<input type="button" id="Three" onClick="TNumber(this.value)" value="3">
<input type="button" onClick="TNumber(this.value)" value="*">
<br>
<input type="button" id="Zero" onClick="TNumber(this.value)" value="0">
<input type="button" id="Dot" onClick="TNumber(this.value)" value=".">
<input type="button" onClick="Calculator()" value="=">
</div>
<script type="text/javascript">
var sum="";
function TNumber(value){
document.getElementById("txt").value+=value;
sum+=value;
}
function Clear(){
document.getElementById("txt").value="";
sum="";
sum1="";
}
function Calculator(){
document.getElementById("txt").value=sum+"="+eval(sum);
}
</script>
</body>
</html>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。