前端案例:简易计算器的实现(dom操作、target、eval函数、try catch、switch-case)
2023-09-14 09:12:48 时间
目录
一、案例效果
二、涉及要点
1. 文本域标签 <textarea></textarea> 的 readonly 属性用于设置文本域文字为只读;
2. DOM 获取元素,getElementById() 获取带有指定 id 的节点;
3. DOM 事件中的 target 是指获取事件的目标,即触发事件的真实元素。如下代码中:
btn.onclick = function (e) { //判断只有点击到按钮上才会将信息录入“显示屏” if (e.target.nodeName === "BUTTON") {
e.target.nodeName,e是指触发事件,名称自己定义;target.nodeName 是获取触发事件元素的标签名,我们这里获取按钮 button,意为只有触发事件的元素为按钮时才执行下面逻辑。除此之外还有:
e.target.id
获取事件触发元素的 id e.target.className 获取事件触发元素的类名 event.target.innerHTML 获取事件触发元素的内容
4. eval 函数
eval() 函数用于计算 JavaScript 字符串,并把它作为脚本代码来执行。如果参数是一个表达式,eval() 函数将执行表达式。如果参数是 Javascript 语句,eval() 将执行 Javascript 语句。
所以当我们点击按钮,将表达式写入“显示屏“,该函数便会自动执行计算。
5. try catch
//格式
try {
tryCode - 尝试执行代码块
}
catch(err) {
catchCode - 捕获错误的代码块
}
finally {
finallyCode - 无论 try / catch 结果如何都会执行的代码块
}
6. switch-case语句
switch ( 表达式 ){
case 值1:
语句块1
break;(结束执行,跳出当前语句)
case 值n:
语句块n
break;
default:
语句块n+1( 前面全为false才执行此语句块 )
}
三、完整代码+详细注释
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简易计算器</title>
<style>
.calc {
width: 300px;
height: 400px;
border: 2px solid #149985;
border-radius: 10px;
margin: auto;
background-color: lightgray;
}
#btn {
width: 90%;
height: 320px;
margin: 10px auto 0 auto;
background-color: rgb(238, 234, 234);
}
#btn button {
width: 80px;
height: 35px;
margin: 15px 0 0 3px;
background-color: white;
border: 1px solid #999;
border-radius: 5px;
font-size: 18px;
font-weight: bolder;
}
#btn button:hover {
background-color: #999;
color: white;
cursor: pointer;
}
</style>
</head>
<body>
<div class="calc">
<!-- 显示数字文本域 -->
<!-- readonly设置文本域为只读 -->
<textarea readonly name="" id="text"
style="width: 90%;height: 30px;display: block;margin: 20px auto 0 auto;font-size: 24px;"></textarea>
<!-- 键盘按钮 -->
<div id="btn">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button>0</button>
<button>C</button>
<button>+</button>
<button>-</button>
<button>*</button>
<button>/</button>
<button style="width: 98%;">=</button>
</div>
</div>
</body>
<script>
//获取按键区域的元素(键盘)
var btn = document.getElementById('btn');
//绑定事件处理函数
btn.onclick = function (e) {
//判断只有点击到按钮上才会将信息录入“显示屏”
if (e.target.nodeName === "BUTTON") {
//获取文本域元素(显示屏)
var text = document.getElementById('text');
//switch 判断当前点击的按钮内容
switch (e.target.innerHTML) {
//点击C清空屏幕
case 'C':
text.value = '';
break;
//如果点击=,获得显示屏中的表达式并计算结果
case "=":
var str = text.value;
//尝试计算显示屏中的内容
try {
//将显示屏的内容交给eval做计算,将结果再替换回显示屏中
text.value = eval(str)
} catch (err) {
text.value = err;
}
break;
//点击其他的按钮,将按钮内容追加到显示屏上
default:
text.value += e.target.innerHTML;
}
}
}
</script>
</html>
相关文章
- 大屏数据可视化案例「建议收藏」
- php案例 :显示目录信息
- Thinkphp5学习011-项目案例-添加学生-控制器部分代码
- 业务用例元模型-软件方法(下)第9章分析类图案例篇Part08
- 盘点一个Python自动化办公的实战案例
- R语言代做编程辅导回归模型分析工资数据案例报告(附答案)
- 世界五百强财务高管数字化战群雄经典案例
- 一网当先 | 新华三助力重庆银行入选2022年全国IPv6规模部署和应用优秀案例
- 「Go」接口 interface: 一个案例说清用法和注意
- 在面试中如何巧妙的展现架构能力?附200道面试真题+100例经典架构案例拆解 | 极客时间
- 【数字信号处理】线性时不变系统 LTI ( 判断某个系统是否是 “ 线性 “ 系统 | 案例四 )
- 全志T3+Logos FPGA开发板——双屏异显开发案例
- 【CSS】鼠标移动到元素上方显示 / 移出盒子范围隐藏案例 ( 子绝父相 | 显示隐藏元素对象 | 鼠标经过样式设置 | 半透明遮罩设置 )
- MySQL优化案例之隐式字符编码转换
- 实用案例:Oracle数据库在企业应用中的应用探索(oracle应用案例)
- 探索Oracle的XML技术:应用与案例解析(oraclexml)
- SAP与Oracle比较:优缺点及应用案例(saporacle对比)