相信大家对于计算器都并不陌生,很多朋友们一定也能完成简易的可以完成加减乘除运算的计算器的制作,那该怎么把简易的计算器美化并且可以完成连续运算,并且可以完成简单的先乘除后加减的动作呢?接下来我们一起来看一看吧~作者本人能力有限,有更好的运算方法或者疏漏之处也欢迎大家指正补充和讨论:)
首先第一步,让我们准备好十个数字的按钮以及加减乘除AC(清空)按钮,还有输出框,此处为了方便之后用css来处理,所有的按钮都采用了div,当然你们也可以使用button来完成这些功能,html代码如下
<div class="calculator">
<div class="cal-dec flexrow">
<p>VERSION 2.1</p>
<p>©2022 OneRepublicSu DESIGN</p>
<p>PAGE 01</p>
</div>
<div class="out flexrow">
<p id="one"></p>
<p id="two"></p>
</div>
<div class="items flexrow">
<div data-id="zero" class="item">0</div>
<div data-id="one" class="item">1</div>
<div data-id="two" class="item">2</div>
<div data-id="three" class="item">3</div>
<div data-id="four" class="item">4</div>
<div data-id="five" class="item">5</div>
<div data-id="six" class="item">6</div>
<div data-id="seven" class="item">7</div>
<div data-id="eight" class="item">8</div>
<div data-id="nine" class="item">9</div>
<div class="btn">
<div id="add">+</div>
<div id="jian">-</div>
<div id="cheng">*</div>
<div id="chu">/</div>
<div id="AC">AC</div>
<div id="result">=</div>
</div>
</div>
<div>
</div>
</div>
有了框架,接下来我们就要一步一步的实现功能,首先让我们给0-9绑定事件,使点击按钮时输入框里会出现对应的数字,这个过程我们可以用for循环遍历items类里所有的div,当然只要你掌握了足够的知识用事件委托也可以完成,笔者出于便于理解的角度采用了for循环来写这个部分,js代码如下
为了输入123这样的多位数,这里用到了一个字符串拼接的方法,用空数组来储存输入的字符
// 输入输出
const one = document.querySelector('#one')
const two = document.querySelector('#two')
const result = document.querySelector('#result')
const items = document.querySelectorAll('.item')
// 符号
const add = document.querySelector('#add')
const jian = document.querySelector('#jian')
const cheng = document.querySelector('#cheng')
const chu = document.querySelector('#chu')
const AC = document.querySelector('#AC')
let arrNumber = []
function concat(str1, str2) {
return `${
str1}${
str2}`
}
// 0-9的事件绑定
for (let r = 0; r < items.length; r++) {
items[r].addEventListener('click', function () {
arrNumber.push(r)
m = arrNumber.reduce(concat)
one.innerHTML = m
})
}
接下来,运算符也是一样的需求和操作,相信很多小伙伴已经开始疑问了,我们的加减乘除不应该完成对应的操作吗,为什么是输出呢?别急,我们一步一步来看,先给四个符号绑定和注册对应的事件
// 加减乘除事件绑定
add.addEventListener('click', function () {
arrNumber.push(' + ')
m = arrNumber.reduce(concat)
one.innerHTML = m
})
jian.addEventListener('click', function () {
arrNumber.push(' - ')
m = arrNumber.reduce(concat)
one.innerHTML = m
})
cheng.addEventListener('click', function () {
arrNumber.push(' * ')
m = arrNumber.reduce(concat)
one.innerHTML = m
})
chu.addEventListener('click', function () {
arrNumber.push(' / ')
m = arrNumber.reduce(concat)
one.innerHTML = m
})
AC.addEventListener('click', function () {
one.innerHTML = ''
two.innerHTML = ''
arrNumber = []
})
准备工作完成了我们就可以开始运算了,相信细心的朋友已经发现了,上述代码中,符号的左右两边是带有空格的,而数字的两边并没有,这就是我们这个计算器实现的核心思想,我们是先得到了一个长的字符串,再用数组的split进行剪切,将他们分开,分开的标记就是空格,这样我们就可以方便的得到所有的符号和数字,在遇到符号的时候就对他左右两边的数字进行操作,遇到数字就将他们转换为数值,依次处理,直到整个字符串都被处理完成就可以了,在处理的时候注意要先处理乘除后处理加减,遍历两次数组,就可以得到我们想要的效果了
处理的代码如下
// 等号的点击事件
result.addEventListener('click', function () {
let n = m.split(' ')
let str = 0
// 乘除先处理
for (let o = 0; o < n.length; o++) {
if (n[o] === '*') {
n[o - 1] = Number(n[o - 1]) * Number(n[o + 1])
n.splice(o, 2)
o--
} else if (n[o] === '/') {
n[o - 1] = Number(n[o - 1]) / Number(n[o + 1])
n.splice(o, 2)
o--
} else {
continue
}
}
// 加减后处理
for (let q = 0; q < n.length; q++) {
if (q === 0) {
str = Number(n[q]) + str
} else {
if (n[q] === '-') {
str = str - Number(n[q + 1])
} else if (n[q] === '+') {
str = str + Number(n[q + 1])
} else {
continue
}
}
}
two.innerHTML =`=${
str}`
})
最后再加上亿点点css装饰,就可以得到我们想要的计算器啦
篇幅的关系,css装饰的代码这边就不提供了,直接上效果图:
end