利用JS實現(xiàn)加減簡易計算器
更新時間：2022年05月30日 11:02:54 作者：一夕ξ
這篇文章主要為大家詳細介紹了如何利用JavaScript制作一個簡單的網(wǎng)頁版加減計算器，文中的示例代碼講解詳細，感興趣的可以了解一下
前言
這個題目前一周左右在小紅書刷到，想著就去就做一下，第一版因為思路不清晰，沒有完整的實現(xiàn)功能。后來忙著改論文，就一直拖到現(xiàn)在。想著回去在看看這篇，發(fā)現(xiàn)已經(jīng)找不到了。
實現(xiàn)思路
記錄錯誤思路：
window.onload = function() {
//實現(xiàn)一個簡易的計算器
//點擊上面的按鈕，要輸入到輸入框中
btns = document.querySelectorAll('button')
input = document.querySelector('input')
// var f = parseInt(2) + parseInt(8)
// console.log(f);
var arr = ''
//對arr以+或者-為分隔符
var arr1 = ''
var arr2 = ''
var a = ''
var b = ''
//判斷arr里面是否有+，-來選擇是加法還是減法
//實現(xiàn)加法
function add(a, b) {
var c = parseInt(a) + parseInt(b)
return c
}
// 實現(xiàn)減法
function jian(a, b) {
var c = parseInt(a) - parseInt(b)
return c
}
for (i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', function() {
var r = this.innerHTML
arr = arr + r
input.value = arr
console.log(arr);
if (r == '=') {
var panduan = arr.indexOf('+')
var puand2 = arr.indexOf('-')
if (panduan != -1 && puand2 == -1) {
arr1 = arr.split('+')
arr2 = arr1[1].split('=')
a = arr1[0]
b = arr2[0]
console.log(a)
console.log(b)
var result = add(a, b)
console.log(result);
input.value = arr + result
} else if (panduan == -1 && puand2 != -1) {
arr1 = arr.split('-')
arr2 = arr1[1].split('=')
a = arr1[0]
b = arr2[0]
console.log(a)
console.log(b)
var result = jian(a, b)
console.log(result);
input.value = arr + result
}
} else if (r == 'C') {
input.value = ''
}
})
}
//當按下+ = 實現(xiàn)加法 按下- = 實現(xiàn)減法 c 清空
//只能實現(xiàn)兩個數(shù)的相減或者相加且需要提前把思路想好，再動，而不是想一步實現(xiàn)一步
}重新整理思路后實現(xiàn)功能：
參考下方代碼那么只需要獲得輸入等號之前的字符串，就可以實現(xiàn)計算功能
方法是先分離出運算數(shù)和運算符，然后按照先算乘除后算加減的方式最后得出結果
const nums = []
let input = '3+20*1/4*2-2'
const operate1 = ['*', '/']
const operate2 = ['+', '-']
const calc1 = (str) => {
let result = 0
let n = 0
for (let i = 0; i < str.length; i++) {
const element = str[i];
if (operate1.indexOf(element) != -1 || operate2.indexOf(element) != -1) {
if (element == '*') {
result = nums[n] * nums[n + 1]
input = input.replace(nums[n] + '*' + nums[n + 1], '' + result)
console.log(nums[n] + '*' + nums[n + 1], result)
nums.splice(n, 2, result)
console.log(input, 'input')
n--
} else if (element == '/') {
result = nums[n] / nums[n + 1]
input = input.replace(nums[n] + '/' + nums[n + 1], '' + result)
console.log(nums[n] + '/' + nums[n + 1], result)
nums.splice(n, 2, result)
console.log(input, 'input2')
n--
}
console.log(nums, 'nums')
n++
}
}
return result
}
const calc2 = (str) => {
let result = 0
let n = 0
for (let i = 0; i < str.length; i++) {
const element = str[i];
if (operate1.indexOf(element) != -1 || operate2.indexOf(element) != -1) {
if (element == '+') {
result = nums[n] + nums[n + 1]
input = input.replace(nums[n] + '+' + nums[n + 1], '' + result)
console.log(nums[n] + '+' + nums[n + 1], result)
nums.splice(n, 2, result)
n--
} else if (element == '-') {
result = nums[n] - nums[n + 1]
input = input.replace(nums[n] + '-' + nums[n + 1], '' + result)
console.log(nums[n] + '-' + nums[n + 1], result)
nums.splice(n, 2, result)
n--
}
console.log(nums, 'nums2')
n++
}
}
return result
}
const getNums = (str) => {
str.replace(/(\d+)\1*/g, (item1, item2) => {
nums.push(parseFloat(item2))
})
}
let result = 0
getNums(input)
result = calc1(input)
console.log(result)
result = calc2(input)
console.log(result)
window.onload = function() {
//實現(xiàn)加減法-清除功能
//等于之后即運算出結果后，按c或者 數(shù)字鍵就會重新輸入或者清零
//實現(xiàn)多個數(shù)的加減法
//1、給每個按鈕綁定相應的事件
var numbers = document.querySelectorAll('.number')
var ad = document.querySelector('.add')
var minu = document.querySelector('.minus')
var equa = document.querySelector('.equa')
var clr = document.querySelector('.cl')
var input = document.querySelector('input')
var str = ''
var flag = 1
var b = []
var btns = document.querySelectorAll('button')
for (i = 0; i < numbers.length; i++) {
numbers[i].addEventListener('click', fnnumber)
}
minu.addEventListener('click', fnminu)
ad.addEventListener('click', fnadd)
equa.addEventListener('click', fnequa)
clr.addEventListener('click', fncl)
//實現(xiàn)按下按鈕的時候，改變按鈕的border顏色，思考的是，那彈起要怎么恢復顏色呢？？----通過一個定時器來改變
for (m = 0; m < btns.length; m++) {
btns[m].addEventListener('click', function() {
this.style.borderColor = 'orange'
var _this = this //改變this的指向
setTimeout(function() {
// console.log(this);//這里面的this指向的是全局的this，window對象，所以如果要使用外層的this，需要改變this的指向
console.log(_this);
_this.style.borderColor = ''
}, [200])
})
}
//2、定義函數(shù)
function fnnumber() {
if (flag == 1 || flag == 0) {
str = str + this.innerHTML
input.value = str
flag = 0
}
}
function fnadd() {
if (flag == 0) {
flag = 1
input.value = str + this.innerHTML
str = str + this.innerHTML
b.push(str)
console.log(b);
console.log(str);
}
}
function fnminu() {
if (flag == 0) {
flag = 1
input.value = str + this.innerHTML
str = str + this.innerHTML
b.push(str)
console.log(b);
}
}
var result
var nums = []
const operate2 = ['+', '-']
function fnequa() {
if (flag == 0) {
flag = 2
input.value = str + this.innerHTML
str = str + this.innerHTML
b.push(str)
result = b[b.length - 1]
console.log(b);
console.log(typeof(result)); // 12+34-23= 此時 還是一個字符串型 怎么把里面的加減等于的數(shù)據(jù)提取出來 //現(xiàn)在的問題就是要計算這個結果，因為是一個字符串，所以需要先分理處運算數(shù)和運算符再進行相應的計算
let finalresult = 0
getNums(result)
finalresult = calc2(result)
console.log(finalresult)
input.value = str + finalresult
}
}
function fncl() {
if (flag == 2) {
input.value = ''
str = ''
b = []
flag = 1
nums = []
}
}
const calc2 = (str) => {
let finalresult = 0
let n = 0
for (let i = 0; i < str.length; i++) {
const element = str[i];
if (operate2.indexOf(element) != -1) {
if (element == '+') {
finalresult = nums[n] + nums[n + 1]
result = result.replace(nums[n] + '+' + nums[n + 1], '' + finalresult)
console.log(nums[n] + '+' + nums[n + 1], finalresult)
nums.splice(n, 2, finalresult)
n--
} else if (element == '-') {
finalresult = nums[n] - nums[n + 1]
result = result.replace(nums[n] + '-' + nums[n + 1], '' + finalresult)
console.log(nums[n] + '-' + nums[n + 1], finalresult)
nums.splice(n, 2, finalresult)
n--
}
console.log(nums, 'nums2')
n++
}
}
return finalresult
}
const getNums = (str) => {
str.replace(/(\d+)\1*/g, (item1, item2) => {
nums.push(parseFloat(item2))
})
}
}HTML代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="comput.css" rel="external nofollow" >
<script src="comput2.js"></script>
</head>
<body>
<div class="box">
<button class="number">1</button>
<button class="number">2</button>
<button class="number">3</button>
<button class="number">4</button>
<button class="add">+</button>
<button class="minus">-</button>
<button class="equa">=</button>
<button class="cl">C</button>
</div>
<input type="text">
</body>
</html>缺點：沒有考慮前置加法和前置減法，。一開始只能先輸入數(shù)字
以上就是利用JS實現(xiàn)加減簡易計算器的詳細內容，更多關于JS計算器的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了javascript事件冒泡實原理,實例分析了事件冒泡的定義及實現(xiàn)技巧,需要的朋友可以參考下2015-05-05
JavaScript高級程序設計 錯誤處理與調試學習筆記，學習js的朋友可以參考下。2011-09-09
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等屬性學
這篇文章主要介紹了JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等屬性學習筆記，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
全面解析JavaScript中offsetLeft、offsetTop的用法
本文主要介紹了全面解析JavaScript中offsetLeft、offsetTop的用法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
項目中遇到比較多的的文檔內容，為了方便查找里面的小內容，一般都會在左側或者右側放一個固定樓層的導航欄，今天就來說一下這個固定樓層導航欄的思路以及實現(xiàn)的方法2021-10-10
本篇主要講解本地對象Array和Date的各種方法。2010-05-05
這篇文章主要介紹了實例詳解JavaScript獲取鏈接參數(shù)的方法的相關資料,需要的朋友可以參考下2016-01-01
之前雖然介紹過一種求數(shù)組最大最小值的方法，但那個方法只是用于數(shù)組中都是數(shù)字的，下面為大家介紹個方法適用于任何數(shù)組，有此需求的朋友可以參考下2013-08-08
通過判斷UA中是否有關鍵字micromessenger，有的話則是微信內置瀏覽器。下面小編給大家分享實現(xiàn)代碼，代碼簡單易懂，需要的朋友可以參考下2016-06-06
谷歌showModalDialog()方法不兼容出現(xiàn)對話窗口的解決辦法
這篇文章給大家介紹了谷歌showModalDialog()方法不兼容出現(xiàn)對話窗口的解決辦法，解決辦法非常好，感興趣的朋友可以參考下2016-02-02