文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

利用JS实现加减简易计算器

2024-04-02 19:55

关注

前言

这个题目前一周左右在小红书刷到,想着就去就做一下,第一版因为思路不清晰,没有完整的实现功能。后来忙着改论文,就一直拖到现在。想着回去在看看这篇,发现已经找不到了。

实现思路

记录错误思路:

window.onload = function() {
    //实现一个简易的计算器
    //点击上面的按钮,要输入到输入框中
    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里面是否有+,-来选择是加法还是减法
        //实现加法
    function add(a, b) {
 
        var c = parseInt(a) + parseInt(b)
        return c
 
    }
    // 实现减法
    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 = ''
            }
 
        })
    }
    //当按下+ = 实现加法   按下- = 实现减法  c 清空
 
    //只能实现两个数的相减或者相加且需要提前把思路想好,再动,而不是想一步实现一步
}

重新整理思路后实现功能:

参考下方代码那么只需要获得输入等号之前的字符串,就可以实现计算功能

方法是先分离出运算数和运算符,然后按照先算乘除后算加减的方式最后得出结果

 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() {
    //实现加减法-清除功能
    //等于之后即运算出结果后,按c或者 数字键就会重新输入或者清零
    //实现多个数的加减法
 
    //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)
 
    //实现按下按钮的时候,改变按钮的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、定义函数
 
 
    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= 此时 还是一个字符串型   怎么把里面的加减等于的数据提取出来  //现在的问题就是要计算这个结果,因为是一个字符串,所以需要先分理处运算数和运算符再进行相应的计算
            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>

缺点:没有考虑前置加法和前置减法,。一开始只能先输入数字

以上就是利用JS实现加减简易计算器的详细内容,更多关于JS计算器的资料请关注编程网其它相关文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯