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

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

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

CSS样式代码：

table {

border-collapse: collapse;

font-size: 20px;

margin: 50px auto;

}

td {

text-align: center;

width: 60px;

height: 40px;

border: 2px solid #cccccc;

background-color: rgb(50, 126, 241);

}

input {

border: none;

outline: none;

background-color: white;

height: 30px;

width: 240px;

}

table tr:nth-child(1) {

height: 40px;

}

td:hover {

opacity: 0.7;

cursor: pointer;

}

tr:nth-child(1) td:hover {

opacity: 1;

}

HTML代码：

傻瓜式计算器

//第一个tr里面放置input元素，并且禁止写入清空退格789+456-123*0.=/

这里特意将清空、退格、和等于这几个添加了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进行显示。

var input = document.querySelector("input");//显示框

var clear = document.querySelector(".clear");//清空

var del = document.querySelector(".del");//退格

var equal = document.querySelector(".equal");//等于

var tds = document.querySelectorAll("td");//获取td元素的伪数组

init();

function init() {

for (var i = 1; i < tds.length; i++) {//这里i从1开始，是因为第一个td不是按键，里面是input元素，因此要剔除

tds[i].addEventListener("click", clickHandler);//给每个td添加一个事件侦听

}

}

function clickHandler(e) {

e.stopPropagation();//阻止冒泡

if (!e.target.getAttribute("class")) {//当不具有class属性的td被点击时

input.value += this.textContent;//this表示点击的那个td，this.textContext表示td里面的数字或运算符号

} else if (e.target.getAttribute("class") === "clear") {//当清空键被点击时，让显示框显示为空

input.value = "";

} else if (e.target.getAttribute("class") === "del") {//当退格键被点击时，先将显示框里的字符串赋给str，再取str的0-倒数第二位复制，再赋给input.value显示

var str = input.value;

input.value = str.slice(0, str.length - 1);

} else if (e.target.getAttribute("class") === "equal") {//当等于键被点击时，将字符串给eval函数进行计算，结果再赋给input.value进行显示。

input.value = eval(input.value);

}

}

标签：getAttribute,value,js,eval,计算器,var,input,td,class

来源： https://www.cnblogs.com/shenyunfeng123/p/12641601.html