计算器[自用复习]

需求（js逻辑）：

正常完成四则运算，确认计算，清除归0

const shown = document.querySelector("#shown")
const buttons = document.querySelectorAll(".square div")
buttons.forEach(button =>{
    button.addEventListener("click",() =>{
        const value = button.textContent
        if (value === "确定"){
            calculate()
        }else if (value === "清除"){
            reset()
        }else{
            showValue(value)
        }
    })
})
function reset(){
    shown.textContent = "0"
}

function showValue(value){
    if(shown.textContent === "0"){
        shown.textContent = value

    }else{
        shown.textContent += value
    }
}

function calculate(){
    try{
        const res = eval(shown.textContent)
        shown.textContent = res
    }catch(error){
        shown.textContent = "wrong"
    }
}

新输入，或者按了确定后输入数字归0重新计算

需要引入变量`isNew`来记录
针对showValue函数
- 如果是，直接替换，不用累加拼接
- 如果不是，就拼接
isNew 的情况{
    页面刚加出来，第一次输入直接换 === isNew
    清除后再次输入 === isNew
    确认后再次输入 === <a id="q1">isNew</a>
    -> 点击确认，触发calculate,所以之后isNew
}

const shown = document.querySelector("#shown")
const buttons = document.querySelectorAll(".square div")
// let isNew = false①
let isNew = true//最开始就是0，新输入直接替换，不然会出现01之类的bug
// if(shown.textContent === "0"){
//     isNew = true
// }
buttons.forEach(button =>{
    button.addEventListener("click",() =>{
        const value = button.textContent
        if (value === "确定"){
            calculate()
        }else if (value === "清除"){
            reset()
        }else{
            showValue(value)

        }
    })
})
function reset(){
    shown.textContent = "0"
    isNew = true
}

function showValue(value){
    if(isNew){
        shown.textContent = value
        isNew = false
    }else{
        shown.textContent += value
        // isNew = false;
    }
    
}

function calculate(){
    try{
        const res = eval(shown.textContent)
        shown.textContent = res
        isNew = true
    }catch(error){
        shown.textContent = "wrong"
        isNew = true
    }
}

按了确定后输入运算符连续计算

[1] 在之前的条件下，按了确认后有两种情况，如果之后按的是运算符就要连续运算，如果是数字就直接替换

如果要连续计算，就必须记录currentRes，满足之后点击确认是数字就继续拼接。
是否是 =>字符串的es6语法糖

if (value === "+" || value === "-" || value === "*" || value === "/") {
    // 逻辑
}

等价于

if("+-*/".includes(value))

点击确认{
    记录当前值
    下一个是运算符{
        继续拼接，保存在
    }不是{
        逻辑不变
    }
}

const shown = document.querySelector("#shown")
const buttons = document.querySelectorAll(".square div")
let isNew = true
let currentRes = null
buttons.forEach(button =>{
    button.addEventListener("click",() =>{
        const value = button.textContent
        if (value === "确定"){
            calculate()
        }else if (value === "清除"){
            reset()
        }else{
            showValue(value)

        }
    })
})
function reset(){
    shown.textContent = "0"
    isNew = true
    currentRes = null
}
function showValue(value){
    if(currentRes != null){
        console.log(value)
        console.log(currentRes)
        if("+-*/".includes(value)){
            shown.textContent = currentRes + value
            isNew = false
            currentRes = null//使用完以后要重置更新！！！
        }
    }
    else{
        if(isNew){
            shown.textContent = value
            isNew = false
        }else{
            shown.textContent += value
            isNew = false;
        }
    }

}
function calculate(){
    try{
        const res = eval(shown.textContent)
        shown.textContent = res
        isNew = true
        currentRes = res
        // console.log(res)
        // console.log(currentRes)
    }catch(error){
        shown.textContent = "wrong"
        isNew = true
        currentRes = null
    }
}

连续多次按运算符按最后一次符号计算

检查显示内容的最后一个字符是否是运算符。

是运算符，则替换最后一个字符
否则直接追加。

slice()

const text = "123+";
const newText = text.slice(0, -1); 
//从索引 0 开始，截取到倒数第一个字符（不包含倒数第一个字符）。 
console.log(newText); // 输出: "123"

substring()

const text = "123+";
const newText = text.substring(0, text.length - 1); 
// 去掉最后一个字符
console.log(newText); // 输出: "123"

小数保留三位，整数取整

alt text

重点是show，calculate的逻辑


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算器</title>
    <style>
        *{
            padding: none;
            margin: none;
        }
        .container{
            border: 1px solid;
            width: 50vw;
            height: 70vh;
            margin: 50px auto;
            background-color:black;
            border-radius: 5%;

        }
        h1{
            text-align: center;
            color: plum;
        }
        .content{
            /* border: 1px solid; */
            height: 90%;
            margin-top: 10px;
            display: flex;
            /* justify-content: center; */
            flex-direction: column;
        }
        .shown{
            height: 200px;
            background-color: #fff;
            width: 100%;
            margin-top: 5px;
            font-size: 60px;
            text-align: end;
            
        }
        .square{
            margin-top: 15px;
            height: 600px; 
            width: 100%;
            background-color: #fff;
            display: grid;
            grid-template-columns: repeat(4, 1fr); /* 4列，每列等宽 */
            grid-template-rows: repeat(4, 1fr);   /* 4行，每行等高 */
            text-align: center;
            line-height: 10vh;
            font-size: 20px;
            background-color: plum;
            gap: 2px;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="content">
            <h1>计算器</h1>
            <div class="shown" id="shown">
                0
            </div>
            <div class="square">
                <div id="add">+</div>
                <div id="reduce">-</div>
                <div id="plus">*</div>
                <div id="divide">/</div>
                <div id="one" >1</div>
                <div id="two" >2</div>
                <div id="three">3</div>
                <div id="four">4</div>
                <div id="five">5</div>
                <div id="six">6</div>
                <div id="seven">7</div>
                <div id="eight">8</div>
                <div id="nine">9</div>
                <div id="zero">0</div>
                <div id="reset">清除</div>
                <div id="sure">确定</div>
            </div>
        </div>
    </div>
    <script src="../演示/复习.js">

    </script>
</body>
</html>

const shown = document.querySelector("#shown");
const buttons = document.querySelectorAll(".square div");
let isNew = true; // 新开始
//isNew = false//继续计算
let currentRes = null; // 无上次结果或者上次结果不存在

// 绑定按钮点击事件
buttons.forEach(button => {
    button.addEventListener("click", () => {
        const value = button.textContent;
        if (value === "确定") {
            calculate();
        } else if (value === "清除") {
            reset();
        } else {
            showValue(value);
        }
    });
});

// 重置计算器
function reset() {
    shown.textContent = "0";
    isNew = true;
    currentRes = null;
}

// 显示输入的值
function showValue(value) {//value是新输入的
    const lastChar = shown.textContent[shown.textContent.length - 1]; // 获取输入之前最后一个字符

    if ("+-*/".includes(value)) {
        // 如果输入的是运算符 ---》累加
        if ("+-*/".includes(lastChar)) {
            // 如果输入前最后一个字符也是运算符，替换最后一个字符
            shown.textContent = shown.textContent.slice(0, -1) + value;
        } else {
            // 如果最后一个字符不是运算符，直接追加
            shown.textContent += value;
        }
        isNew = false;
    } else if (currentRes != null) {
        // 如果有计算结果，且输入的是数字
        //按了确认后输入数字，直接换
        shown.textContent = value;
        isNew = false;//之后需要的是拼接
        currentRes = null; // 使用完后重置
    } else {
        // 如果没有计算结果
        if (isNew) {
            // 如果是新输入，直接替换显示内容
            shown.textContent = value;
            isNew = false;
        } else {
            // 如果不是新输入，追加到显示内容
            shown.textContent += value;
        }
    }
}

// 计算结果
function calculate() {
    try {
        const res = eval(shown.textContent); // 使用 eval 计算表达式
        shown.textContent = res; // 显示结果
        isNew = true; // 设置为新输入状态
        currentRes = res; // 存储当前结果
    } catch (error) {
        shown.textContent = "wrong"; // 如果计算出错，显示错误
        isNew = true;
        currentRes = null;
    }
}

多对象.foreach(单对象 =>{
    单对象.addEventListener("点击/鼠标移动……方法",箭头函数{
        函数逻辑
    })
})

posted @ 2025-02-25 21:34 GJ504b 阅读(20) 评论(0) 收藏举报

刷新页面返回顶部

GJ504b