利用原生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" );
// 获取到input
var input = document.getElementById( "input1" );
// 声明第一个数值
var firstValue = 0,
bool = false ;
// 声明运算符
var type;
for ( var i = 0; i < blocks.length; i++) {
//点击第i个block
blocks[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清空为0
if (bool) {
input.value = "0" ;
bool = false ;
}
// 将input中的value累加点击的内容，将它强转为数字是为了去掉最前面的0，最后再转为字符
input.value = Number(input.value + this .innerHTML).toString();
} else {
//判断点击为+ - * /的情况
if ( this .innerHTML !== "C" && this .innerHTML !== "=" ) {
//将第一个数存到firstValue
firstValue = Number(input.value);
//将运算符存到type
type = this .innerHTML;
//将input中的value重置为0
input.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.value
if (Number(input.value) === 0) input.value = "0" ;
else
input.value = (firstValue / Number(input.value)).toString();
break ;
}
//bool为true时，点击"="后,当再次输入时，input.value为0
bool = true ;
}
}
};
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/nqq0921/article/details/115536722