2021-08-07

最新推荐文章于 2024-09-16 23:33:40 发布
Deep&Mind
最新推荐文章于 2024-09-16 23:33:40 发布
阅读量66
点赞数
文章标签： HTML CSS JavaScript 在线计算器源码分享
本文链接：https://blog.csdn.net/m0_55382342/article/details/119488121
版权
学了一段时间网页前端，自己摸索着写了一个简单的在线计算器，把源码发上来大家可以参考参考同时也欢迎大佬提出改进意见
在线预览网址：点击这里
gitee：点击这里
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线计算器</title>
    <style>
        @font-face {
            font-family: "SketchRockwell";
            src: url(DIGITAL-Regular.ttf);
        }

        * {
            margin: 0;
            padding: 0;
            border: 0;
        }

        li {
            list-style: none;
        }

        body {
            background-color: #f2f2f2;
        }

        .box {
            position: relative;
            margin: 50px auto;
            width: 600px;
            height: 800px;
        }

        .box img {
            width: 600px;
            height: 800px;
            border-radius: 10px;
            box-shadow: 10px 10px 4px -4px rgba(0, 0, 0, .4);
        }

        .output {
            position: absolute;
            left: 48px;
            top: 53px;
        }

        .output input {
            border: 5px rgba(61, 61, 61, 0.9) solid;
            width: 495px;
            height: 90px;
            outline: none;
            background-color: #bcbb9d;
            border-radius: 10px;
            box-shadow: 0px 0px 5px 6px rgb(0 0 0 / .3);
            text-align: right;
            font-size: 52px;
            color: rgba(31, 30, 30, 0.8);
            font-family: "SketchRockwell";
        }

        .button {
            position: absolute;
            left: 25px;
            top: 220px;
            width: 560px;
            height: 600px;
        }

        .button li button {
            float: left;
            margin: 12px;
            width: 110px;
            height: 75px;
            font-size: 32px;
            color: #f2f2f2;
            background-image: url(img/数字.png);
            background-position: center;
            border-radius: 6px;
            box-shadow: 0px 3px 4px 2px rgba(0, 0, 0, .7);
        }

        .button .select {
            float: right;
            width: 110px;
            height: 175px;
            margin-right: 36px;
            font-size: 35px;
            background-image: url(img/=.png);
            background-position: center;
            border-radius: 6px;
            box-shadow: 0px 3px 4px 2px rgba(0, 0, 0, .7);
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="img/输入框.png">
        <div class="output">
            <input value="" disabled="disabled">
        </div>
        <div class="button">
            <ul>
                <li><button class="clear">CE</button></li>
                <!--0-->
                <li><button class="back">退格</button></li>
                <!--1-->
                <li><button class="operator" style="font-size: 42px;">÷</button></li>
                <!--2-->
                <li><button class="operator" style="font-size: 42px;">×</button></li>
                <!--3-->
                <li><button class="num">7</button></li>
                <!--4-->
                <li><button class="num">8</button></li>
                <!--5-->
                <li><button class="num">9</button></li>
                <!--6-->
                <li><button class="operator" style="font-size: 45px;">-</button></li>
                <!--7-->
                <li><button class="num">4</button></li>
                <!--8-->
                <li><button class="num">5</button></li>
                <!--9-->
                <li><button class="num">6</button></li>
                <!--10-->
                <li><button class="operator" style="font-size: 42px;">+</button></li>
                <!--11-->
                <li><button class="num">1</button></li>
                <!--12-->
                <li><button class="num">2</button></li>
                <!--13-->
                <li><button class="num">3</button></li>
                <!--14-->
                <li><button class="select">=</button></li>
                <!--15-->
                <li><button class="change" style="font-size: 42px;">+/-</button></li>
                <!--16-->
                <li><button class="num">0</button></li>
                <!--17-->
                <li><button class="num" style="font-size: 42px;">.</button></li>
                <!--18-->
            </ul>
        </div>
    </div>
    <script>
        var output = document.querySelector('input')
        var ul = document.querySelector('ul')
        var button = ul.querySelectorAll('button')
        var num = ul.querySelectorAll('.num')
        //第一个数
        var numValue1 = ''
        //第二个数
        var numValue2 = ''
        //操作符
        var opear = ''
        for (i = 0; i < button.length; i++) {
            button[i].setAttribute('index', i)
            if (i == 15) {
                button[15].onmousedown = function () {
                    this.style.backgroundImage = 'none'
                    this.style.backgroundColor = '#c1612e'
                    this.style.boxShadow = '0px 3px 8px 4px rgba(0, 0, 0, .2) inset'
                }
                button[15].onmouseup = function () {
                    this.style.backgroundImage = 'url(img/=.png)'
                    this.style.boxShadow = '0px 3px 4px 2px rgba(0, 0, 0, .7)'
                }
            } else {
                button[i].onmousedown = function () {
                    this.style.backgroundImage = 'none'
                    this.style.backgroundColor = '#616161'
                    this.style.boxShadow = '0px 3px 8px 4px rgba(0, 0, 0, .2) inset'
                }
                button[i].onmouseup = function () {
                    this.style.backgroundImage = 'url(img/数字.png)'
                    this.style.boxShadow = '0px 3px 4px 2px rgba(0, 0, 0, .7) '

                }
            }

        }
        for (var j = 0; j < num.length; j++) {
            num[j].onclick = function () {
                if (opear == '') {
                    numValue1 += this.innerText
                    output.value = numValue1
                } else {
                    numValue2 += this.innerText
                    output.value = numValue1 + opear + numValue2
                }
            }
        }
        var operators = ul.querySelectorAll('.operator')
        for (i = 0; i < operators.length; i++) {
            operators[i].onclick = function () {
                if (numValue1 !== '') {
                    opear = this.innerText
                    output.value = numValue1 + opear
                }
            }
        }
        var result = ul.querySelector('.select')
        result.onclick = function () {
            var one = parseFloat(numValue1)
            var two = parseFloat(numValue2)
            var r = null
            switch (opear) {
                case '+':
                    r = one + two
                    break
                case '-':
                    r = one - two
                    break
                case '×':
                    r = one * two
                    break
                case '÷':
                    if (two == 0) {
                        alert('除数不能为0')
                    } else {
                        r = one / two
                    } break
            }
            numValue1 = r
            numValue2 = ''
            output.value = r
        }
        var back = ul.querySelector('.back')
        back.onclick = function () {
            if (numValue1.length !== 1 && numValue2 == '' && opear == '') {
                numValue1 = numValue1.substring(0, numValue1.length - 1)
                output.value = numValue1
            } else if (numValue1.length == 1 && opear == '' && numValue2 == '') {
                numValue1 = ''
                output.value = numValue1
            } else if (opear !== '' && numValue2 == '') {
                opear = ''
                output.value = numValue1
            } else if (numValue2.length !== 1) {
                numValue2 = numValue2.substring(0, numValue1.length - 1)
                output.value = numValue1 + opear + numValue2
            } else if (numValue2.length == 1) {
                numValue2 = ''
                output.value = numValue1 + opear
            }
        }
        var change = ul.querySelector('.change')
        change.onclick = function () {
            if (numValue2 == '') {
                numValue1 = -1 * numValue1
                output.value = numValue1
            } else {
                numValue2 = -1 * numValue2
                output.value = numValue1 + opear + numValue2
            }
        }
        var clear = ul.querySelector('.clear')
        clear.onclick = function () {
            numValue1 = ''
            numValue2 = ''
            opear = ''
            output.value = '0'
        }
    </script>
</body>

</html>