JavaScript实现简易计算器:动态事件注册与基础DOM操作
作者:白露时间:2026-10-23 12:05:18浏览:304
本文通过一个简易计算器的实现案例,重点演示如何在JavaScript中动态注册事件。内容涵盖获取输入框值、判断数据类型、根据索引提取运算符以及执行加减乘除运算的基础逻辑,旨在帮助开发者掌握动态事件处理与基础DOM操作技巧。
JavaScript简易计算器实现与动态事件注册
本示例旨在构建一个支持加减乘除运算的简易计算器,核心目的在于练习动态注册事件的处理机制。由于主要侧重于基础技能的训练,代码中使用了多种基础方法来实现功能。
界面效果展示

具体实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简易计算器</title>
<script type="text/javascript">
window.onload = function(){
document.onclick = function(){
var ipts = document.getElementsByTagName("input");
for (var i = 0; i < ipts.length; i++) {//得到值和符号
if (ipts[i].type == "text") {
switch (i){
case 0:
num1 = ipts[i].value;
num1 = Number(num1);
break;
case 1:
opt = ipts[i].value;
break;
case 2:
num2 = ipts[i].value;
num2 = Number(num2);
break;
}
}
}
var res;//结果
switch (opt){//通过得到的值和符号进行计算
case "+":
res = num1 + num2;
break;
case "-":
res = num1 - num2;
break;
case "*":
res = num1 * num2;
break;
case "/":
res = num1 / num2;
break;
}
var r = document.getElementById("result");
r.value = res;
}
}
</script>
</head>
<body>
<input type="text">
<input type="text">
<input type="text">=
<input type="text" id="result">
<input type="button" value="计算" id="btn">
</body>
</html>
以上内容为本文的全部分享,希望能为读者的学习提供有益参考,同时也欢迎大家继续支持本站获取更多技术资源。
作者最新文章
AOS.js 动画不触发怎么办?排查 DOM 加载与移动端兼容问题
2026-11-05 17:02:26
sigma.js 怎么实现节点点击、拖拽与悬停提示交互
2026-11-05 15:03:27
Matter.js 与 PixiJS/Three.js 集成:分离物理计算与渲染
2026-11-05 13:43:48
主流JS弹幕库选型指南:Danmaku.js等库的功能与体积对比
2026-11-05 09:28:19
JavaScript点击事件监听与交互效果实例
2026-11-05 09:10:19
