本篇内容主要讲解“原生JS怎么实现简单计算器功能”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“原生JS怎么实现简单计算器功能”吧!
使用html和css写出计算器的基本结构和样式，用原生JS实现计算器的加减乘除运算功能，只能计算简单的两位数的运算，不支持三个数连加或者连乘等等。一次计算完成之后再进行下一次运算不需要clear，可以直接进行下次运算。具体实现如下：
html结构：
<div id="box"> <!-- 文本框要禁止用户输入，只能通过代码中的input.value来修改 --> <input id="display" type="text" value="0" disabled> <div class="btn">1</div> <div class="btn">2</div> <div class="btn">3</div> <div class="btn">+</div> <div class="btn">4</div> <div class="btn">5</div> <div class="btn">6</div> <div class="btn">-</div> <div class="btn">7</div> <div class="btn">8</div> <div class="btn">9</div> <div class="btn">*</div> <div class="btn">C</div> <div class="btn">0</div> <div class="btn">=</div> <div class="btn">/</div></div>css样式：
#box { width: 500px; height: 600px; border: 1px solid #000000; } #display { width: 460px; height: 60px; margin: 15px; text-align: right; font-size: 60px; line-height: 60px; overflow: hidden; background: #ffffff; } .btn { width: 100px; height: 100px; border: 1px solid #000000; float: left; margin: 10px 11px; font-size: 40px; line-height: 100px; text-align: center; user-select: none; }JS代码：
firstValue这个全局变量存储第一次输入的数，input的input.value属性也是一个变量，这个值既作为页面上显示的内容，也是输入的数值。让这两个值进行运算，结果再显示到输入框中即可。bool变量作用：当一次运算完成之后所有数值清零。
如果要实现用上一次的结果继续参与运算这个功能，可以再设置一个全局变量result来存储每次运算后的结果，当下次输入运算符号时，判断firstValue和result，再决定用哪个值计算。当点击C按钮时，所有值清空，返回初始状态。
var input = document.getElementById("display");var btnCollection = document.getElementsByClassName("btn");var type;var firstValue = 0;var bool = false; for (var i = 0; i < btnCollection.length; i++) { // 获取到每个按键并添加点击事件。点击后会触发function中代码执行。 btnCollection[i].onclick = function () { if(bool){ input.value = "0"; firstValue = 0; type = undefined; bool = false; } // input.value = this.innerHTML; //显示点击的数字在文本框内 if (!isNaN(Number(this.innerHTML))) { input.value = Number(input.value + this.innerHTML).toString(); } else if (this.innerHTML !== "C" && this.innerHTML !== "=") { firstValue = Number(input.value); type = this.innerHTML; input.value = 0; } else if (this.innerHTML === "C") { firstValue = 0; type = undefined; input.value = "0"; } else { switch (type) { case "+": input.value = (Number(input.value) + firstValue).toString(); break; case "-": input.value = (firstValue - Number(input.value)).toString(); break; case "*": input.value = (Number(input.value) * firstValue).toString(); break; case "/": input.value = (firstValue / Number(input.value)).toString(); break; } bool = true; } } }到此，相信大家对“原生JS怎么实现简单计算器功能”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
