本文详细介绍如何使用原生JavaScript、HTML和CSS构建一个简单的计算器。通过操作DOM元素，实现两位数的加减乘除运算，并处理连续运算与结果清零的逻辑。
原生JS实现简单计算器功能
本文分享了利用JavaScript实现简易计算器的完整代码示例，供读者参考学习。
首先使用HTML和CSS搭建计算器的基本结构与样式，随后通过原生JavaScript实现加减乘除的核心运算逻辑。该计算器仅支持两位数的基础运算，暂不支持三个及以上数字的连续计算。值得注意的是，单次运算结束后无需手动点击清除按钮，系统已处理状态重置，可直接进行下一次运算。具体实现细节如下：
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;
/* overflow: hidden; 溢出隐藏 */
/* text-overflow: ellipsis; 文本溢出时显示省略号 */
/* word-wrap: none; 强制不换行 */
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;
}JavaScript代码部分：
在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;
}
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。