js函数计算器

最新推荐文章于 2024-01-23 16:40:43 发布

怀某在线搬砖

最新推荐文章于 2024-01-23 16:40:43 发布

阅读量307

点赞数 5

文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_51273290/article/details/111067229

版权

js函数计算器

面向过程编写，已经做完小数处理

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style>
    * {
        margin: 0;
        padding: 0;
        text-decoration: none;
        list-style: none;
    }

    body {
        background-color: #eee;
    }

    .frame {
        width: 500px;
        height: 600px;
        margin: 50px auto;
        background-color: #ccc;
        box-shadow: 0 0 10px #000;
        padding: 4px;
        border-radius: 6px;
    }

    .numberOutput {
        width: 498px;
        background-color: #eee;
    }

    .numberOutput p {
        display: flex;
        flex-direction: row-reverse;
        font-size: 48px;
        overflow-y: hidden;
        height: 75px;
    }

    .numberInput {
        float: left;
        width: 500px;
        height: 360px;
        background-color: #fff;
    }

    .numberInput li {
        float: left;
        width: 121px;
        line-height: 86px;
        text-align: center;
        font-size: 35px;
        background-color: #aaa;
        border: 2px solid #ccc;
        cursor: pointer;
    }

    .numberInput li:hover {
        background-color: #ccc;
    }
</style>
<script>
    window.onload = function () {
        let num = document.getElementsByClassName("num")
        let btn = document.getElementsByClassName("btn")
        let vw = document.getElementsByClassName("output")[1]
        let vwH = document.getElementsByClassName("output")[0]
        for (let i = 0; i < num.length; i++) {
            num[i].onclick = function () {
                vw.innerHTML += num[i].innerHTML
            }
        }
        btn[0].onclick = function () {
            vw.innerHTML = vw.innerHTML.substr(0, vw.innerHTML.length - 1)
        }
        btn[1].onclick = function () {
            location.reload();     //刷新页面
        }
        btn[2].onclick = function () {
            if (vw.innerHTML.indexOf('%') !== -1) {   //这个百分数结果并不能在下次运算中使用 除非退格删掉
                vw.innerHTML = 'error'
            } else if (vw.innerHTML.indexOf('e') !== -1) {  //error没删干净 强制刷新
                location.reload();
            } else {
                vwH.innerHTML = vw.innerHTML + '×100%'
                vw.innerHTML = Number(vw.innerHTML) * 100 + '%'
            }
        }
        btn[3].onclick = function () {
            if (vw.innerHTML.indexOf('%') !== -1) {   //这个百分数结果并不能在下次运算中使用 除非退格删掉
                vw.innerHTML = 'error'
            } else if (vw.innerHTML.indexOf('e') !== -1) {  //error没删干净 强制刷新
                location.reload();
            } else {
                vwH.innerHTML = 'sqrt(' + vw.innerHTML + ')'
                vw.innerHTML = Number(vw.innerHTML) ** 0.5
            }
        }
        function floatBase(numA, numB) {        //浮点数运算问题
            let aLastIndex = String(numA).length - 1
            let bLastIndex = String(numB).length - 1
            let aFloLen = aLastIndex - (Number.isInteger(numA * 1) ? aLastIndex : String(numA).indexOf('.'))
            let bFloLen = bLastIndex - (Number.isInteger(numB * 1) ? bLastIndex : String(numB).indexOf('.'))
            return 10 ** (aFloLen > bFloLen ? aFloLen : bFloLen)
        }
        function computed(numA, numB, sym, base) {   //定义中文及自定义运算符号
            switch (sym) {
                case '＋':
                    return (numA * base + numB * base) / base
                    break;
                case '－':
                    return (numA * base - numB * base) / base
                    break;
                case '×':
                    return (numA * base * (numB * base)) / base ** 2
                    break;
                case '÷':
                    return numA * base / (numB * base)
                    break;
                //default:
            }
        }
        function evaluation(arr, s = 0, e = arr.length) {
            let arr2 = arr.slice(s, e)
            let symArr1 = arr2.filter(z => (z === '×' || z === '÷'))  //回调函数filter()  定义运算优先级
            let symArr2 = arr2.filter(z => (z === '＋' || z === '－'))
            while (1) {
                let idx, base, sym, res;
                let first = symArr1.shift() || symArr2.shift()
                if (!first) { break }
                idx = arr2.indexOf(first)
                sym = first
                base = floatBase(arr2[idx - 1], arr2[idx + 1])
                res = computed(arr2[idx - 1], arr2[idx + 1], sym, base)
                arr2.splice(idx - 1, 3, res)
            }
            return arr2.shift()
        }
        btn[18].onclick = function () {
            vwH.innerHTML = vw.innerHTML
            if (vw.innerHTML.indexOf('%') !== -1) {   //这个百分数结果并不能在下次运算中使用 除非退格删掉
                vw.innerHTML = 'error'
            } else if (vw.innerHTML.indexOf('I') !== -1) {  //Infinity没删干净 强制刷新
                location.reload();
            } else if (vw.innerHTML.indexOf('e') !== -1) {  //error没删干净 强制刷新
                location.reload();
            } else if (vw.innerHTML.indexOf('N') !== -1) {  //NaN没删干净 强制刷新
                location.reload();
            } else {
                vw.innerHTML = vw.innerHTML.replace(/\＋/g, ',＋,').replace(/\－/g, ',－,').replace(/\×/g, ',×,').replace(/\÷/g, ',÷,');
                vw.innerHTML = evaluation(vw.innerHTML.split(','))
            }
        }
    }
</script>

</head>
<body>
<div class="frame">
    <div class="numberOutput">
        <p class="output"></p>
        <p class="output"></p>
    </div>
    <!--禁止文本被拖拽或双击选中-->
    <div class="numberInput" onselectstart="return false;" ondragstart="return false">
        <ul>
            <li class="btn">←</li>
            <li class="btn">C</li>
            <li class="btn">%</li>
            <li class="btn">√</li>
            <li class="num btn">7</li>
            <li class="num btn">8</li>
            <li class="num btn">9</li>
            <li class="num btn">÷</li>
            <li class="num btn">4</li>
            <li class="num btn">5</li>
            <li class="num btn">6</li>
            <li class="num btn">×</li>
            <li class="num btn">1</li>
            <li class="num btn">2</li>
            <li class="num btn">3</li>
            <li class="num btn">－</li>
            <li class="num btn">0</li>
            <li class="num btn">.</li>
            <li class="btn">＝</li>
            <li class="num btn">＋</li>
        </ul>
    </div>
</div>
</body>
</html>