欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

原生写计算器

程序员文章站 2024-02-27 12:36:15
...

效果:
原生写计算器
代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <link rel="stylesheet" href="./计算机.css">
</head>
<body>
<comment>
    <header>wys | qq:2888666</header>
    <main>
        <p id="text"></p>
        <h1 id="result"></h1>
    </main>
    <div>
        <ul>
            <li>C</li>
            <li></li>
            <li>÷</li>
            <li>×</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>-</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>+</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li class="a">0</li>
            <li>.</li>
            <li class="b">=</li>
        </ul>
    </div>
</comment>

<script>
    var li = document.getElementsByTagName('li');
    var text = document.getElementById('text');
    var result = document.getElementById('result');

    let arr = []
    let answer = null;

    //计算函数 (数,符号,数)
    function calculation(front, operator, after) {
        switch (operator) {
            case "+":
                return front + after;
            case "-":
                return front - after;
            case "×":
                return front * after;
            case "÷":
                return front / after;
        }
    }


    function wys(arr) {
        console.log(arr)
        if (arr.length < 3) {
            answer = arr[0]
            return arr[0]
        }
        if (arr.length === 3) {
            let num = calculation(Number(arr[0]), arr[1], Number(arr[2]))
            arr.splice(0, 3, num);
            answer = arr[0]
            return arr[0];
        }

        let index = arr.findIndex((item) => {
            return '÷×'.indexOf(item) > -1
        });

        if (index === -1) {
            let num = calculation(Number(arr[0]), arr[1], Number(arr[2]))
            arr.splice(0, 3, num)
            wys([...arr]);
        } else {
            let num = calculation(Number(arr[index - 1]), arr[index], Number(arr[index + 1]))
            arr.splice(index - 1, 3, num)
            wys([...arr]);
        }
    }


    for (let i = 0; i < li.length; i++) {
        li[i].onclick = function () {
            switch (this.innerText) {
                case "C":
                    text.innerText = ''
                    result.innerText = '';
                    return false;
                case "←":
                    let str2 = result.innerText;
                    if (str2.length === 0) {
                        console.log(str2)
                        return;
                    }
                    result.innerText = str2.substring(0, str2.length - 1);
                    return;
                case "=":
                    arr = []
                    let str = 0 + result.innerText;
                    console.log(str)
                    let aa = str.split(/[-+×÷]/);
                    let bb = []

                    for (let j = 0; j < str.length; j++) {
                        if ('+-×÷'.indexOf(str[j]) > -1) {
                            bb.push(str[j])
                        }
                    }

                    let c = 0;
                    for (let j = 0; j < aa.length + bb.length; j++) {
                        arr.push(aa[c])
                        if (!bb[c]) {
                            console.log(arr)
                            wys(arr)

                            text.innerText = result.innerText;
                            console.log(String(answer))
                            for (let k = 0; k < String(answer); k++) {
                                if (String(answer)[k] === '.') {
                                    result.innerText = String(answer).split(".")[1].length > 6 ? answer.toFixed(6) : answer;
                                    return;
                                }
                            }
                            result.innerText = answer;
                            return;
                        }
                        arr.push(bb[c])
                        j++;
                        c++;
                    }
                    return;
            }

            result.innerText += this.innerText;
        }
    }
</script>
</body>
</html>
相关标签: js