前端制作计算器

用html+css+js完成计算器的基本功能，代码如下：

HTML代码

        <div id="four">		<div class="evaluator"><div class="input"><input type="text"></div><table><tr><td>7</td><td>8</td><td>9</td><td>+</td></tr><tr><td>4</td><td>5</td><td>6</td><td>-</td></tr><tr><td>1</td><td>2</td><td>3</td><td>*</td></tr><tr><td>0</td><td>c</td><td>=</td><td>/</td></tr></table></div></div>

CSS代码

#four .evaluator{border: 2px gray solid;width: 240px;
}
#four input{width: 200px;padding: 5px;}
#four .input{width: 200px;margin: 10px auto;
}
#four table{width: 240px;border-collapse:separate;border-spacing:15px 15px;
}
#four td{padding: 5px 15px;border: 1px black solid;
}
#four td:active{background-color: gray;
}

JS代码

const input = document.querySelector("#four input");
const tdList = document.querySelectorAll("#four td");
let evalstr = "";
console.log(tdList);
for(let i = 0;i < tdList.length;i++){tdList[i].addEventListener("click",()=>{if(tdList[i].innerText == "c"){evalstr = "";}else if(tdList[i].innerText == "="){if(evalstr.length>0&&Object.is(Number(evalstr.charAt(evalstr.length-1)),NaN)){console.log(evalstr.charAt(evalstr.length-1));alert("请不要进行错误输入");evalstr = "";}else{evalstr = new String(eval(evalstr));}}else if((evalstr.length==0||evalstr.length==1)&&(tdList[i].innerText == "+"||tdList[i].innerText == "*"||tdList[i].innerText == "/")&&Object.is(Number(evalstr.charAt(0),NaN))){}else if((evalstr.length==0&&Object.is(Number(tdList[i].innerText),NaN))||(evalstr.length!=0&&Object.is(Number(evalstr.charAt(evalstr.length-1)),NaN)&&Object.is(Number(tdList[i].innerText),NaN))){evalstr = evalstr.substring(0,evalstr.length-1) +tdList[i].innerText;}else{evalstr += tdList[i].innerText;}if(evalstr == "Infinity"){alert("请不要进行错误输入");evalstr = "";}input.value = evalstr;});
};

效果图：