设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › 简易计算器
返回列表 发新帖
查看: 2074|回复: 3

[已解决]简易计算器

[复制链接]
真的只会一点点
发表于 2020-11-3 22:32:56 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x

如何让计算器中等式和结果一起显示而不是结果代替等式，求助，谢谢。








<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>计算器</title>
        <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
   <div class="box-1">
                <div class="box-2">
                    <input type="text" name="" class="bag" id="input-box" value="0" maxlength="21" readonly="readonly">
                    <div class="bag-2">
                            <div onclick="a('1')" class="little-box">1</div>
                            <div onclick="a('2')" class="little-box">2</div>
                            <div onclick="a('3')" class="little-box">3</div>
                            <div onclick="operator('backspace')" class="little-box">←</div>
                            <div onclick="a('+')" class="little-box">+</div>
               </div>
                    <div class="bag-2">
                            <div onclick="a('4')" class="little-box">4</div>
                            <div onclick="a('5')" class="little-box">5</div>
                            <div onclick="a('6')" class="little-box">6</div>
                            <div onclick="operator('pow')" class="little-box">x2</div>
                            <div onclick="a('-')" class="little-box">-</div>
                    </div>
                    <div class="bag-2">
                            <div onclick="a('7')" class="little-box">7</div>
                            <div onclick="a('8')" class="little-box">8</div>
                            <div onclick="a('9')" class="little-box">9</div>
                            <div onclick="operator('opposite')" class="little-box">+/-</div>
                            <div onclick="a('*')" class="little-box">*</div>
                    </div>
                    <div class="bag-2">
                            <div onclick="a('.')" class="little-box">.</div>
                            <div onclick="a('0')" class="little-box">0</div>
                            <div onclick="e()" class="little-box">=</div>
                            <div onclick="operator('sqrt')"  class="little-box">√</div>
                            <div onclick="a('/')" class="little-box">/</div>
                    </div>
                  
            </div>
   </div>
   <script>
                        input = document.getElementById('input-box');

                        function s(v) {
                                input.value = v
                        }

                        function a(v) {
                                input.value += v
                        }

                        function e() {
                               
                                try {
                                        s(eval(input.value))
                                } catch (e) {
                                        s('Error')
                                }
                        }


                        function operator(type) {
                                switch (type) {
                                        case "backspace":
                                                var str = input.value;
                                                //str = (str != "0") ? str : "";
                                                str = str.substr(0, str.length - 1);
                                                str = (str != "") ? str : "0";
                                                input.value = str;
                                                break;
                                        case "opposite":
                                                input.value = -input.value;
                                                break;
                                        case "percent":
                                                input.value = input.value / 100;
                                                break;
                                        case "pow":
                                                input.value = Math.pow(input.value, 2);
                                                break;
                                        case "sqrt":
                                                input.value = Math.sqrt(input.value);
                                                break;
                                }
                        }
                </script>
</body>
</html>




以下是css代码
* {
    margin: 0;
    padding: 0;
   
}
.box-1{
        width: 901px;
        height: 647px;
        background-color: #000;
        z-index: 2;
        margin-left: 333px;
        margin-top: 20px;

}
.box-2{
        width: 649px;
        height: 566px;
        background-color: #ffff;
        padding-left: 86px;
        padding-top: 41px;
  margin: 80px;
}
.bag{
        height: 80px;
        width: 569px;
        background-color: #eeeeeb;
        padding-top: 20px;
        padding-left: 20px;
}
.bag-2{
        height: 98px;
        width: 569px;
        margin: 10px;
        background-color: #ffff;
       
}
.little-box{
        margin: 10px;
        float: left;
        width: 83px;
        height: 85px;
        padding-left: 10px;
        background-color: #eeeeeb;
        text-align: center;
        font-size: 14px;

}





最佳答案
月排行榜 / 总排行榜
kogawananari
2020-11-4 08:49:56
多行屏幕显示 一行显示算式 一行显示结果 每次按【=】就复制
贴一个我以前写的
<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>
<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>
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

kogawananari
发表于 2020-11-4 08:49:56 | 显示全部楼层    本楼为最佳答案   
多行屏幕显示 一行显示算式 一行显示结果 每次按【=】就复制
贴一个我以前写的
<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>
<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>
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

真的只会一点点
 楼主| 发表于 2020-11-9 23:14:29 | 显示全部楼层
kogawananari 发表于 2020-11-4 08:49
多行屏幕显示 一行显示算式 一行显示结果 每次按【=】就复制
贴一个我以前写的

我想问一下从119到132行是什么意思，谢谢
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

kogawananari
发表于 2020-11-10 09:37:22 | 显示全部楼层
真的只会一点点 发表于 2020-11-9 23:14
我想问一下从119到132行是什么意思，谢谢

先算乘除 再算加减
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-11-23 14:59

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表