写一个网页计算器

最新推荐文章于 2024-01-28 22:53:06 发布
Lavau
最新推荐文章于 2024-01-28 22:53:06 发布
阅读量399
点赞数
本文链接：https://blog.csdn.net/snakehj/article/details/106603110
版权
写一个网页计算器

它可以进行长算式计算，不能进行混合运算。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
    <style>
        table{
            height: 350px;
            width: 500px;
            margin: 50px auto;
            background-color: #ccffff;
        }
        td{
            width: 25px;
            height: 20px;
        }
        .title, .result{
            text-align: center;
            background-color: #ffae9f;
        }
        .screen{
            text-align: right;
            background-color: #ffffff;
        }
        .btn{
            text-align: center;
            border: 1px turquoise solid;
        }
        .number{
            border-radius: 25px;
            background-color: #ff2f39;
        }
    </style>
</head>
<body>
    <div class="container">
        <table border="1" cellpadding="15" cellspacing="10">
            <tr>
                <td colspan="5" class="title">计算器</td>
            </tr>
            <tr>
                <td colspan="5" class="screen" id="screen"></td>
            </tr>
            <tr>
                <td colspan="2" class="result" id="result"></td>
                <td colspan="2" class="btn" id="backspace">Backspace</td>
                <td class="btn" id="clear">清除</td>
            </tr>
            <tr>
                <td class="btn number" id="1">1</td>
                <td class="btn number" id="2">2</td>
                <td class="btn number" id="3">3</td>
                <td class="btn operator" id="+">+</td>
                <td class="btn" id="date">时间</td>
            </tr>
            <tr>
                <td class="btn number" id="4">4</td>
                <td class="btn number" id="5">5</td>
                <td class="btn number" id="6">6</td>
                <td class="btn operator" id="-">-</td>
                <td class="btn operator" id="squre">平方</td>
            </tr>
            <tr>
                <td class="btn number" id="7">7</td>
                <td class="btn number" id="8">8</td>
                <td class="btn number" id="9">9</td>
                <td class="btn operator" id="*">*</td>
                <td class="btn" id="sqrt">开方</td>
            </tr>
            <tr>
                <td class="btn number" id="0">0</td>
                <td class="btn number" id=".">.</td>
                <td class="btn" id="equal">=</td>
                <td class="btn operator" id="/">/</td>
                <td class="btn" id="nl">nl</td>
            </tr>
        </table>
    </div>

    <div id="one"></div><hr>
    <div id="two"></div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
    <script>
        let screen = document.getElementById("screen").innerText;
        let operatorNum = ['#'];

        $(function () {
            $(".number").click(function () {
                var char = $(this).attr("id");
                if(char === '.' ){
                    if(screen.length == 0){
                        alert("错误");
                        return;
                    }
                    if(isNaN(screen[screen.length - 1])){
                        alert("错误");
                        return;
                    }
                }
                screen += char;
                document.getElementById("screen").innerText = screen;
            });

            //处理操作符
            $(".operator").click(function () {
                var operator = $(this).attr("id");
                if(screen.length == 0 && !(operator === '-')){
                    alert("错误");
                    return;
                }
                if(screen[screen.length - 1] === '.'){
                    alert("错误");
                } else {
                    //排除第一个数是负数
                    if(screen.length != 0) {
                        operatorNum[operatorNum.length] = operator;
                        screen = screen.concat(" ", operator);
                        document.getElementById("screen").innerText = screen;
                    } else {
                        screen = screen.concat("", operator);
                        document.getElementById("screen").innerText = screen;
                    }
                }
            });

            $("#equal").click(function () {
                let chars = screen.split(' ');
                if(chars.length < 2){
                    alert("错误");
                    return;
                }
                if(!valid(operatorNum)){
                    alert("不能进行加减与乘除的混合运算！");
                    screen = "";
                    document.getElementById("screen").innerText = screen;
                    document.getElementById("result").innerText = "";
                    return;
                }
                let firstNum = isNaN(chars[0][0]) ? parseFloat(chars[0])
                    : -1 * parseFloat(chars[0].substr(1, chars[0].length));
                let secondNum, operator, result;
                for(let i = 1; i < chars.length; i++){
                    operator = chars[i][0];
                    secondNum = parseFloat(chars[i].substr(1, chars[i].length));
                    if(secondNum ==  '0' && operator === '/'){
                        alert("错误");
                        return;
                    }
                    switch (operator) {
                        case '+': result = firstNum = firstNum + secondNum;break;
                        case '-': result = firstNum = firstNum - secondNum;break;
                        case '*': result = firstNum = firstNum * secondNum;break;
                        case '/': result = firstNum = firstNum / secondNum;break;
                    }
                }
                screen = "";
                document.getElementById("screen").innerText = "";
                document.getElementById("result").innerText = result;

            });

            $("#clear").click(function () {
                screen = "";
                document.getElementById("screen").innerText = screen;
                document.getElementById("result").innerText = "";
            });

            $("#backspace").click(function () {
                screen = screen.substr(0, screen.length - 1);
                document.getElementById("screen").innerText = screen;
            });

            $("#date").click(function () {
                document.getElementById("result").innerText = new Date().toLocaleString();
                document.getElementById("result").style.cssText = "font-size: 0.75em;"
            });

            $("#squre").click(function () {
                let num = document.getElementById("screen").innerText;
                if(num.indexOf(' ') > 0 || num[num.length - 1] === '.' ){
                    alert("错误");
                } else {
                    document.getElementById("result").innerText = parseFloat(num) * parseFloat(num);
                }
                screen = "";
                document.getElementById("screen").innerText = screen;
            });

            $("#sqrt").click(function () {
                let num = document.getElementById("screen").innerText;
                if(num.indexOf(' ') > 0 || num[num.length - 1] === '.' || parseFloat(num) < 0 ){
                    alert("错误");
                } else {
                    document.getElementById("result").innerText = Math.sqrt(parseFloat(num));
                }
                screen = "";
                document.getElementById("screen").innerText = screen;
            });
        });

        // 运算符一致性判断
        function valid(array) {
            let one = array[1];
            for(let i = 2; i < array.length; i++){
                if(one === '+' || one === '-') {
                    if (array[i] === '*' || array[i] === '/')
                        return false;
                } else {
                    if(array[i] === '+' || array[i] === '-')
                        return false;
                }
            }
            return true;
        }

    </script>
</body>
</html>
Lavau
关注
0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
写一个网页计算器

写一个网页计算器它可以进行长算式计算，不能进行混合运算。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>计算器</title> <style> table{ height: 350px; width: 500px; ma
复制链接

扫一扫