利用JavaScript编写简单计算器及eval函数解析
作者：青柠时间：2026-10-24 19:38:33浏览：139
本文介绍如何使用JavaScript开发一个简单的计算器程序。重点解析eval函数的语法与返回值特性，说明其如何通过执行字符串表达式简化加减乘除逻辑。文章提供完整HTML/CSS/JS代码示例，帮助开发者快速掌握前端基础交互与字符串计算技巧。
JavaScript计算器效果展示
最终运行效果如下图所示：
计算器完整代码实现
具体实现代码参考如下：
<!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>模拟计算器</title>
<style>
button {
width: 39px;
height: 30px;
background-color: rgb(102, 240, 102);
}
button:hover {
background-color: black;
color: rgb(255, 249, 237);
}
button:active {
background-color: rgb(79, 72, 72);
color: white;
}
table{
background: rgb(192, 248, 109);
}
</style>
</head>
<body>
<div>
<table border="1px">
<tr style="text-align: center;">
<td colspan="4">
<input type="text" id="result" >
</td>
</tr>
<tr>
<td><button id="le" onclick="getChar('(')">(</button></td>
<td><button id="rg" onclick="getChar(')')">)</button></td>
<td><button id="baifen" onclick="getChar('%')">%</button></td>
<td><button id="C" onclick="clear1()">C</button></td>
</tr>
<tr>
<td><button id="seven" onclick="getChar('7')">7</button></td>
<td><button id="eight" onclick="getChar('8')">8</button></td>
<td><button id="nine" onclick="getChar('9')">9</button></td>
<td><button id="divi" onclick="getChar('/')">/</button></td>
</tr>
<tr>
<td><button id="four" onclick="getChar('4')">4</button></td>
<td><button id="five" onclick="getChar('5')">5</button></td>
<td><button id="six" onclick="getChar('6')">6</button></td>
<td><button id="mul" onclick="getChar('*')">*</button></td>
</tr>
<tr>
<td><button id="one" onclick="getChar('1')">1</button></td>
<td><button id="two" onclick="getChar('2')">2</button></td>
<td><button id="three" onclick="getChar('3')">3</button></td>
<td><button id="dec" onclick="getChar('-')">-</button></td>
</tr>
<tr>
<td><button id="zero" onclick="getChar('0')">0</button></td>
<td><button id="point" onclick="getChar('.')">.</button></td>
<td><button id="=" onclick="getResult()">=</button></td>
<td><button id="add" onclick="getChar('+')">+</button></td>
</tr>
</table>
</div>
</body>
<script>
// 点击按键返回按键值
function getChar(btnid) {
var btns = document.getElementsByTagName("button")
switch (btnid) {
case '+':
setNum('+')
break;
case '.':
setNum('.')
break;
case '=':
setNum('=')
break;
case '0':
setNum('0')
break;
case '1':
setNum('1')
break;
case '2':
setNum('2')
break;
case '3':
setNum('3')
break;
case '-':
setNum('-')
break;
case '4':
setNum('4')
break;
case '5':
setNum('5')
break;
case '6':
setNum('6')
break;
case '7':
setNum('7')
break;
case '8':
setNum('8')
break;
case '9':
setNum('9')
break;
case '/':
setNum('/')
break;
case '*':
setNum('*')
break;
case '(':
setNum('(')
break;
case ')':
setNum(')')
break;
case '%':
setNum('%')
break;
default:
break;
}
}
// 清空显示屏
function clear1() {
document.getElementById("result").value = ""
}
// 将数值显示到显示屏
function setNum(charCode) {
var origin = document.getElementById('result');
origin.value += charCode;
origin.innerText = origin.value;
}
// 计算结果
function getResult(){
var res=eval(document.getElementById("result").value);
// 追加'='
setNum('=');
// 追加结果
setNum(res)
}
</script>
</html>注意：在实现计算功能时，可以直接调用eval函数，从而避免手动编写加减乘除的具体逻辑，这极大地简化了开发流程。
eval函数使用示例与返回值
具体示例如下：
var num=eval(‘3+3')
此时运算结果为num=6。
eval函数语法与参数详解
关于eval函数的具体用法说明：
其语法格式为eval（参数），其中参数必须是一个JavaScript表达式字符串，该字符串中可以包含变量名以及已存在对象的属性。
关于该函数的返回值情况：
| 参数类型 | 返回值 |
|---|---|
| 整数或者函数 | 整数或函数 |
| 字符串（且是表达式） | 该字符串表达式的运行结果 |
| 字符串（且是语句或者语句块） | 执行该语句块并返回undefined |
至此，关于利用JavaScript开发简单计算器的内容介绍完毕，如需了解更多关于使用JavaScript编写简易计算器的相关信息，欢迎查阅本站往期文章或继续浏览下方推荐内容，感谢大家的支持！
作者最新文章
ES6模块化中js文件怎么用import和export交互
2026-11-05 17:00:48
JS读取本地文件时报错或无响应的常见原因
2026-11-05 16:32:31
let、const与var的区别：JavaScript变量声明最佳实践
2026-11-05 14:16:38
JS中直接定义静态二维数组的字面量写法
2026-11-05 14:16:08
JS 怎么查找字符串中所有匹配项的位置
2026-11-05 14:15:53