前端案例简易计算器的实现(dom操作、target、eval函数、try catch、switch-case)

网友投稿 585 2022-05-28

目录

一、案例效果

二、涉及要点

三、完整代码+详细注释

一、案例效果

二、涉及要点

1. 文本域标签 的 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

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才执行此语句块 )

}

三、完整代码+详细注释

简易计算器

JavaScript web前端

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:数据赋能的未来,是嵌入式BI
下一篇:安装配置Maven(二)
相关文章