js实现一个简易的计算器
作者：nqq0921 时间：2024-02-23 11:48:31
利用原生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
标签：js,计算器
0
投稿猜你喜欢
python-序列解包(对可迭代元素的快速取值方法)
2023-12-28 23:23:57
asp获取完整url地址代码
2010-03-22 14:25:00
浅析MySQL replace into 的用法
2024-01-18 15:58:38
谈谈如何管理门户级网站的CSS/IMG/JS文件
2009-09-03 11:48:00
Python OpenCV 调用摄像头并截图保存功能的实现代码
2022-07-08 03:11:13
python根据开头和结尾字符串获取中间字符串的方法
2021-01-02 01:44:28
深入理解NumPy简明教程---数组2
2022-03-24 05:01:18
浅析Python自带性能强悍的标准库itertools
2022-04-28 12:45:19
win10 64bit下python NLTK安装教程
2023-04-05 19:49:40
使用numpy.mean() 计算矩阵均值方式
2021-12-17 03:55:53
初识python的numpy模块
2021-10-06 10:04:57
python 通过 socket 发送文件的实例代码
2022-10-07 17:32:48
Python 内置变量和函数的查看及说明介绍
2021-06-11 16:12:14
python实现聚类算法原理
2022-07-23 23:42:33
python函数常见关键字分享
2022-06-17 04:31:55
symfony2.4的twig中date用法分析
2023-11-15 01:30:06
Django用户认证系统如何实现自定义
2021-02-03 07:54:38
React redux 原理及使用详解
2023-07-14 15:41:58
SqlServer 获取字符串中小写字母的sql语句
2024-01-21 03:34:53
Python实现双色球号码随机生成
2023-10-24 23:56:22