js实现一个简易的计算器
作者:nqq0921 发布时间:2024-02-23 11:48:31
标签: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");
// 获取到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
0
投稿
猜你喜欢
- 如果你电脑是Mac的,使用homebrew安装MySQL是一个非常便捷的方式,但是还是会出现一些问题;首先保证你已经安装了mysql,如果是
- 区别:series,只是一个一维数据结构,它由index和value组成。dataframe,是一个二维结构,除了拥有index和value
- 主要应用了argsort()函数,函数原型:numpy.argsort(a, axis=-1, kind='quicksort
- 如何开始 C#学习过程中有一集讲的是如何查看类图,看完视频后自己就学习如何在VS 2019中查看类图,但是找了好长时间都没有找到查看类图这
- 要随机生成字符串代码如下:在MySQL中定义一个随机串的方法,然后再SQL语句中调用此方法。随机串函数定义方法:CREATE DEFINER
- python-try-except:pass用法1.为了跳过for循环里的某次循环以下代码当某次循环发生错误时,执行except代码块,co
- 目录元组1.什么是元组tuple2.元组tuple支持什么数据类型3.元组tuple的基本特征4.如何声明一个元组tuple5.玩转元组tu
- 接口性能测试时,接口请求参数是根据一定的规则拼接后进行MD5加密后再进行传参,因此借助于python脚本实现,则可以有效提升测试效率。1.分
- 一、MatplotlibMatplotlib是Python中众多数据可视化库的鼻祖,其设计风格与20世纪80年代设计的商业化程序语言MATL
- 1. 生成for 2005版本的数据库脚本 2008 的manger studio -- 打开"对象资源管理
- Python文字转语音(调研&成品函数)由于项目需要, 我需要将文字转换为语音, 那么第一步就要进行调研什么是语音合成技术?语音合成
- 前言大家好,今天给大家带来绘制“手绘风格”可视化作品的小技巧,主要涉及Python编码绘制。主要内容
- 你一定听说过这句著名的数据科学名言:在数据科学项目中, 80% 的时间是在做数据处理。如果你没有听过,那么请记住:数据清洗是数据科学工作流程
- 输入任意一个大写字母,生成金字塔图形def GoldTa(input): L = [chr(i) for i in range(
- 前言mysql版本为mysql> select version();+-----------+| version() |+------
- # django manage.py扩展自定义命令环境: mac django1.10.3在实际的项目开发过程中,我们可能要执行某脚本初始化
- 引入大家在使用谷歌或者百度搜索时,输入搜索内容时,谷歌总是能提供非常好的拼写检查,比如你输入 speling,谷歌会马上返回 spellin
- Python之所以这么流行,是因为它不仅能够应用于科技领域,还能用来做许多其他学科的研究工具,绘制地图便是其功能之一。今天我们用matplo
- 目录爬虫Python验证码识别 1、批量下载验证码图片2、识别代码看看效果 3、折腾降噪、去干扰爬虫Python验证码识
- python是支持多线程的,并且是native的线程。主要是通过thread和threading这两个模块来实现的。thread是比较底层的