js代码借助函数eval制作简易计算器

2021-03-26 10:24

阅读：584

标签：NPU ++ 表示 document input extc 属性 html+css select

之前我们实现一些简易的计算器功能，是通过判断运算符来实现简单的一元运算，但是eval这个函数可以将包含数字和运算符的字符串进行计算，得出运算结果。

1.先写html+css代码，做出一个计算器样子。

技术图片

CSS样式代码：

HTML代码：

//第一个tr里面放置input元素，并且禁止写入

这里特意将清空、退格、和等于这几个添加了class类，是因为这几个按键是需要区别对待的，不属于输入数字和运算符的范围。

2.接下来就是script代码，大致思路就是获取td的一个伪数组，然后给每一个添加事件侦听，通过事件侦听来执行相应的代码

1）通过获取点击的td的class的属性值来判断，如果没有class类，e.tatget.getAttribute("class")的值就是undefined，判断为false，此时就是数字，小数点和运算符等被点击

2）获取的e.tatget.getAttribute("class")是"clear"的话，代表清空input，令input.value="";

3）获取的e.tatget.getAttribute("del")是"clear"的话，代表退格input，则将input.value的值从头复制到倒数第二个为止，重新赋给input.value;

4）获取的e.tatget.getAttribute("del")是"equal"的话，代表计算input，将input.value字符串进行计算，返回计算结果给input.value进行显示。

js代码借助函数eval制作简易计算器

标签：NPU ++ 表示 document input extc 属性 html+css select

原文地址：https://www.cnblogs.com/shenyunfeng123/p/12641601.html

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：js代码借助函数eval制作简易计算器
文章链接：http://soscw.com/index.php/essay/68113.html

亲，登录后才可以留言！