原生JS实现简单计算器功能
更新时间：2022年04月02日 18:10:47 作者：weixin_51276799
这篇文章主要为大家详细介绍了原生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;
/* 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;
}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;
}
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
函数防抖和函数节流都是对函数进行特殊的设置，减少该函数在某一时间段内频繁触发带来的副作用。二者只是采用的设置方式和原理不一样，其最终的目的是一样的。2021-05-05
本文主要介绍了js实现旋转木马效果的实例。具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
这篇文章主要介绍了JavaScript实现信用卡校验方法,涉及javascript使用Luhn算法进行校验的技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
一句话就可以概括：代码 ( 包括函数 ) 执行时所需要的所有信息就是执行环境。由于 ES 历经多个版本，所以执行环境的标准也一直在变。文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
最近小编做项目遇到这样的需求，要求实现一个全屏滚动的效果，在网上找了实例代码，但是不是很完美，小编又结合自己的知识给大家补充下，对微信小程序全屏滚动效果的实例代码感兴趣的朋友参考下本文吧2018-11-11
js 对象是否存在，然后进行下一步的操作。2009-07-07
这篇文章主要为大家详细介绍了如何使用JavaScript构建一个主题切换器,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-01-01
第三部分的效果已经基本上满足大部分的需求了。所以这一部分呢，只能算是加分项。废话不多说了，还是继续博文吧。2010-10-10
这篇文章主要为大家详细介绍了Javascript实现简易天数计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
本篇文章主要介绍了微信小程序实现全局搜索代码高亮的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
最新评论