大二初次使用HTML+JS+CSS做一个计算器_使用html+css+javascript做一个的计算器-CSDN博客

本文链接：https://blog.csdn.net/Fishermen_sail/article/details/117845326
直接贴代码，第一次写可以参考参考。
在这里插入图片描述
<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>四则运算器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #f7f1e3;
        }

        .main {
            position: relative;
            width: 400px;
            height: 400px;
            margin: 100px auto;
            background-color: #ced6e0;
            box-shadow: 0px 0px 10px 5px rgb(0,0,0,.3);
            border-radius: 11px;
        }

        .top {
            position: absolute;
            top: 10px;
            left: 10px;
            width: 380px;
            height: 300px;
            background-color: #dfe4ea;
            border-radius: 4px;
        }

        .bottom {
            position: absolute;
            bottom: 10px;
            left: 10px;
            width: 380px;
            height: 70px;
            background-color: darkgrey;
        }

        .input1 {
            float: left;
            height: 140px;
            width: 140px;
            margin-top: 70px;
            margin-bottom: 50px;
            font-size: 3em;
            background-color: #ffffff;
            border: 0;
            margin-bottom: 0;
        }

        .input2 {
            float: right;
            height: 140px;
            width: 140px;
            margin-top: 70px;
            margin-bottom: 50px;
            font-size: 3em;
            background-color: #ffffff;
            border-style: none;
            margin-bottom: 0;
        }

        table {
            float: left;
            width: 100px;
            height: 140px;
            margin-top: 70px;
            background-color: #999;
            border-collapse: collapse;
            border: 0;
            padding: 0;
        }

        table tr td .button{
            border-width: 0;
            font-size: 50px;
        }

        .submit {
            width: 60px;
            height: 30px;
            margin-top: 33px; 
            margin-left:102px;
            float: left;
            border-radius: 5px;
            border-width: 0;
        }

        .submit:hover {
            box-shadow: 0px 0px 10px 5px rgb(0,0,0,.1);
            background-color: #a4b0be;
        }

        .reset {
            width: 60px;
            height: 30px;
            margin-top: 33px; 
            margin-right:102px;
            float:right;
            border-radius: 5px;
            border-width: 0;
        }

        .reset:hover {
            box-shadow: 0px 0px 10px 5px rgb(0,0,0,.1);
            background-color: #a4b0be;
        }

        .bottom {
            width: 379px;
            height: 68px;
            border-radius: 4px;
            background-color: #dfe4ea;
        }

        .answer {
            float: left;
            height: 32px;
            width: 183px;
            margin-left: 100px;
            margin-top: 20px;
            background-color: #f1f2f6;
            text-align: center;
            font-size: 24px;
        }

        .button {
            width: 100%;
            height: 100%;
        }

        .button:hover {
            background-color: #f6e58d;
        }

        footer {
            position: absolute;
            height: 60px;
            width: 1280px;
            background-color: gray;
            bottom: 0px;
        }

        footer p {
            color: #888;
            line-height: 60px;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="top">
            <form target="iframe" onsubmit="return formSubmit(this)">
                <input type="number" class="input1" required min="-100" max="100">
            <table>
                <tr>
                    <td>
                        <!-- <button class="button">+</button> -->
                        <input type="button" value="+" class="button">
                    </td>
                    <td>
                        <!-- <button class="button">-</button> -->
                        <input type="button" value="-" class="button">
                    </td>
                </tr>
                <tr>
                    <td>
                        <!-- <button class="button">×</button> -->
                        <input type="button" value="×" class="button">
                    </td>
                    <td>
                        <!-- <button class="button">÷</button> -->
                        <input type="button" value="÷" class="button">
                    </td>
                </tr>
            </table>
            <input type="number" class="input2" min="-100" max="100" required>
            <div>
                <!-- <button value="submit" class="submit">提交</button> -->
                <input type="submit" value="提交" class="submit">
            </div>
            <div>
                <!-- <button value="reset" class="reset">重置</button> -->
                <input type="reset" value="重置" class="reset" >
            </div>
            </form>
            <iframe name="iframe" src="about:blank" style="display:none;"></iframe>
        </div>
        <div class="bottom">
            <div class="answer">
                
            </div>
        </div>
    </div>
    <footer>
        <p align="center">
            Copyright &copy; 2020 MADE IN CHINA
        </p>
    </footer>
    <script>
        var j;
        var k;
        var number3;
       
        var btns = document.getElementsByClassName('button');
        for (i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                var character = this.value;
                if (character === '+') {
                    k = 1;
                } else if (character === '-') {
                    k = 2;
                } else if (character === '×') {
                    k = 3
                } else if (character === '÷') {
                    k = 4;
                }
                for (var i = 0; i < btns.length; i++) {
                    btns[i].style.backgroundColor = '';
                }
                this.style.backgroundColor = '#ffbe76';
            }
        }



        function formSubmit (even) {
            var number1 = Number(even.querySelector('.input1').value);
            var number2 = Number(even.querySelector('.input2').value);
            var answer = document.querySelector('.answer');
            switch (k) 
            {
                case 1:
                    number3 = number1 + number2;
                    break;
                case 2:
                    number3 = number1 - number2;
                    break;
                case 3:
                    number3 = number1 * number2;
                    break;
                case 4:
                    number3 = number1 / number2;
                    number3 = number3.toFixed(3);
                    break;
                default:
                    answer.innerHTML = '请选择符号';
                    return false;
            }
            if ((typeof(number3) == undefined || isNaN(number3) || !isFinite(number3)) && k != 5) {
                answer.innerHTML = '请输入有效值';
            } else if (k != 5) {
                answer.innerHTML = number3;
            }
            return true
        }



        var btn_reset = document.querySelector('.reset');
        btn_reset.onclick = function() {
            // 我觉得这是给了content2值，改变不了原来的东西；div呢种有专门的函数就可以
            // var content2 = document.querySelector('.input2').value;
            // content2.innerHTML = '';\
            document.querySelector('.input2').value = '';
            document.querySelector('.input1').value = '';
            var answer = document.querySelector('.answer');
            k = 5;
            console.log(k);
            answer.innerHTML = '';
            for (i = 0; i < btns.length; i++) {
                btns[i].style.backgroundColor = '';
            }
        }

    </script>
</body>
</html>