js实现一个简易的计算器

利用原生js实现一个简易的计算器（附详细注释），供大家参考，具体内容如下

<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\" /><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /><title>Document</title><style>.divs {width: 500px;height: 600px;border: 1px solid #000000;margin: auto;}.divs > input {width: 460px;height: 45px;margin-left: 18px;margin-top: 10px;font-size: 30px;background-color: white;text-align: right;}.divs > div {width: 100px;height: 100px;float: left;border: 1px solid #000000;margin-left: 18px;margin-top: 25px;font-size: 40px;line-height: 100px;text-align: center;user-select: none;}</style></head><body><div class=\"divs\"><input type=\"text\" value=\"0\" id=\"input1\" disabled /><div class=\"block\">7</div><div class=\"block\">8</div><div class=\"block\">9</div><div class=\"block\">-</div><div class=\"block\">4</div><div class=\"block\">5</div><div class=\"block\">6</div><div class=\"block\">+</div><div class=\"block\">1</div><div class=\"block\">2</div><div class=\"block\">3</div><div class=\"block\">*</div><div class=\"block\">C</div><div class=\"block\">0</div><div class=\"block\">=</div><div class=\"block\">/</div></div>

js:

<script>// 获取到所有类名为block的元素var blocks = document.getElementsByClassName(\"block\");// 获取到inputvar input = document.getElementById(\"input1\");// 声明第一个数值var firstValue = 0,bool = false;// 声明运算符var type;for (var i = 0; i < blocks.length; i++) {//点击第i个blockblocks[i].onclick = function () {//点击谁，this就指向谁，在这里this指向每次点击的元素console.log(this);//this.innerHTML显示点击的div里面的内容（比如1,2,3,-,+）//判断点击的为数字的情况（不是NaN，就是数字）if (!isNaN(this.innerHTML)) {// bool初始为false,当bool为false时,可以不断输入,当bool为true时，input清空为0if (bool) {input.value = \"0\";bool = false;}// 将input中的value累加点击的内容，将它强转为数字是为了去掉最前面的0，最后再转为字符input.value = Number(input.value + this.innerHTML).toString();} else {//判断点击为+ - * /的情况if (this.innerHTML !== \"C\" && this.innerHTML !== \"=\") {//将第一个数存到firstValuefirstValue = Number(input.value);//将运算符存到typetype = this.innerHTML;//将input中的value重置为0input.value = \"0\";} else if (this.innerHTML === \"C\") {  //判断点击C的情况// 全都重置firstValue = 0;type = undefined;input.value = \"0\";} else {  //判断点击=的情况//根据运算符的类型进行运算switch (type) {case \"+\":input.value = (firstValue + Number(input.value)).toString();break;case \"-\":input.value = (firstValue - Number(input.value)).toString();break;case \"*\":input.value = (firstValue * Number(input.value)).toString();break;case \"/\":// 除数为0时重置input.valueif (Number(input.value) === 0) input.value = \"0\";elseinput.value = (firstValue / Number(input.value)).toString();break;}//bool为true时，点击\"=\"后,当再次输入时，input.value为0bool = true;}}};}

以上就是本文的全部内容，希望对大家的学习有所帮助

您可能感兴趣的文章: