简易计算器

最新推荐文章于 2024-07-19 12:58:53 发布

叮█

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量246

点赞数

文章标签：前端 javascript css

本文链接：https://blog.csdn.net/cndyde/article/details/122333698

版权

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="./css/index.css">
</head>
<body>
    <div class="container">
        <div class="box1">
            <span>0</span>
        </div>
        <hr>
        <div class="box2">
            <button>C</button>
            <button>←</button>
            <button>%</button>
            <button>/</button>
            <br>
            <button>1</button>
            <button>2</button>
            <button>3</button>
            <button>x</button>
            <br>
            <button>4</button>
            <button>5</button>
            <button>6</button>
            <button>-</button>
            <br>
            <button>7</button>
            <button>8</button>
            <button>9</button>
            <button>+</button>
            <br>
            <button>?</button>
            <button>0</button>
            <button>.</button>
            <button>=</button>
        </div>
    </div>n
    <script src="./js/index.js"></script>
</body>
</html>

css代码

.container {
  width: 200px;
  min-height: 260px;
  margin: 50px auto;
  border: 1px solid #ccc;
  padding: 5px;
  border-radius: 5px;
  box-sizing: border-box;
}
.container .box1 {
  width: 180px;
  height: 50px;
  margin: 5px auto;
  border: 1px solid #999;
  border-radius: 5px;
  line-height: 70px;
  color: #999;
  box-sizing: border-box;
}
.container .box1 span {
  padding-left: 5px;
}
.container .box2 {
  width: 180px;
  margin: 25px auto;
  min-height: 150px;
  background: burlywood;
  border-radius: 5px;
  padding: 18px;
  box-sizing: border-box;
}
.container .box2 button {
  width: 32px;
  height: 24px;
  margin: 2px 0;
}

js 代码

let btns = document.querySelectorAll('button')
let span = document.querySelector('span')

// 最后结果
let num = 0
// 点击运算符号前存数值
let sum = 0
// 加法
let jian = 0
// 减法
let jia = 0
// 乘法
let cheng = 0
// 除法
let chu = 0
for (let i = 0; i < btns.length; i++) {
    btns[i].addEventListener('click', function () {

        switch (this.innerHTML) {
            // 按键 0
            case '0':
                // 字符串多位数累加
                sum += this.innerHTML 
                return span.innerHTML = sum * 1

            // 按键 1
            case '1':
                // 字符串多位数累加
                sum += this.innerHTML //点累加示例 ： 点击第一次 1 ， sum = 01 ； 点击第二次 1 ，sum = 11 ；点击第三次 1 ，sum = 111 ； 点击.... 
                return span.innerHTML = sum * 1


            case '2':
                sum += this.innerHTML
                return span.innerHTML = sum * 1


            case '3':
                sum += this.innerHTML
                return span.innerHTML = sum * 1


            case '4':
                sum += this.innerHTML
                return span.innerHTML = sum * 1


            case '5':
                sum += this.innerHTML
                return span.innerHTML = sum * 1


            case '6':
                sum += this.innerHTML
                return span.innerHTML = sum * 1


            case '7':
                sum += this.innerHTML
                return span.innerHTML = sum * 1


            case '8':
                sum += this.innerHTML
                return span.innerHTML = sum * 1


            case '9':
                sum += this.innerHTML
                return span.innerHTML = sum * 1

            // 归零键，全部清空
            case 'C':
                jia = 0
                jian = 0
                cheng = 0
                chu = 0
                sum = 0
                num = 0
                break

            // 加法
            case '+':
                // 加法之前判断别的是因为存在后面这种问题{ 20 x 50 + 50 } === { cheng(点击乘号以前的sum)  x  sum (点击加号之前的sum)  +  sum(点击加号之后的sum) }
                // 判断在点击加法前，是否点击了减法并且没有求和(num)
                if (jian !== 0) {
                    // 如果有就先运算减法
                    num = jian - sum * 1 // (最后一次点击减号前的sum（数字）值    减去  本次点击加好之前的sum值)
                    // 将减法求得的值赋值给加法 的存储变量
                    jia = num
                    // 将减法清零 ，避免重复运算
                    jian = 0
                // 判断是否点击了乘法未运算
                } else if (cheng !== 0) {
                    num = cheng * sum
                    jia = num
                    cheng = 0
                // 判断是否点击了除法未运算
                } else if (chu !== 0) {
                    num = chu / sum
                    jia = num
                    chu = 0
                } else {
                    // 先判断加法是否为0，如果为0(初始值为0)，就将点击加号前的sum 赋值给加号变量 ； 不为0 就表示之前已经点击过加号了，就直接把之前的值加上现在的值
                    jia === 0 ? jia = sum * 1 : jia += sum * 1
                    // 赋值给 最终的结果
                    num = jia
                }
                // 清空sum (数值) ，避免重复计算
                sum = 0
                break


            case '-':
                if (jia !== 0) {
                    num = jia + sum * 1
                    jian = num
                    jia = 0
                } else if (cheng !== 0) {
                    num = cheng * sum
                    jian = num
                    cheng = 0
                } else if (chu !== 0) {
                    num = chu / sum
                    jian = num
                    chu = 0
                } else {
                    jian === 0 ? jian = sum * 1 : jian -= sum
                    num = jian
                }
                sum = 0
                break

            case 'x':
                if (jia !== 0) {
                    num = jia + sum * 1
                    cheng = num
                    jia = 0
                } else if (jian !== 0) {
                    num = jian * sum
                    cheng = num
                    jian = 0
                } else if (chu !== 0) {
                    num = chu / sum
                    cheng = num
                    chu = 0
                } else {
                    cheng === 0 ? cheng = sum * 1 : cheng *= sum
                    num = cheng
                }
                sum = 0
                break


            case '/':
                if (jia !== 0) {
                    num = jia + sum * 1
                    cheng = num
                    jia = 0
                } else if (jian !== 0) {
                    num = jian * sum
                    cheng = num
                    jian = 0
                } else if (cheng !== 0) {
                    num = cheng * sum
                    chu = num
                    cheng = 0
                } else {
                    chu === 0 ? chu = sum * 1 : chu /= sum
                    num = chu
                }
                sum = 0
                break

            case '%':
                num = sum / 100
                sum = 0
                break

            // 添加小数
            case '.':
                sum = sum.concat('.')
                return span.innerHTML = sum * 1 + '.'

            // 删除sum最后一位数
            case '←':
                sum = sum.slice(0, sum.length - 1)
                return span.innerHTML = sum * 1

            // 求和
            case '=':
                // 判断有没有点击运算符号都没有被点击或者被存值，点击了任何一个条件都不成立
                if (jian === 0 && jia === 0 && cheng === 0 && chu === 0 ) {
                    // 所有运算符号都没有被点击和存值，便把累计的sum 赋值给最终的结果num
                    num = sum * 1
                    // 如果减法未运算完，便直接运算减法
                } else if (jian !== 0) {
                    // num (最终值) = jian (最后点击的减号运算符 - ) - sum(每次点击数字累加的值)
                    num = jian - sum * 1
                } else if (jia !== 0) {
                    num = jia += sum * 1
                } else if (cheng !== 0) {
                    num = cheng *= sum
                } else if (chu !== 0) {
                    num = chu /= sum
                } 
                // 所有的if 判断最后都只会有一个成立，并返回
                // 将最终值符给sum，后面点了等号还可以继续根据当前值运算
                sum = num
                // 将 + -  * / 全部清零
                jian = 0
                jia = 0
                cheng = 0
                chu = 0
                break


        }


        // 渲染
        span.innerHTML = num
    })
}