制作一个简易计算器

学前端的小萌新777

已于 2023-08-17 20:41:23 修改

阅读量60

点赞数

文章标签：前端 javascript html5 html css3 css

于 2023-08-17 20:34:03 首次发布

本文链接：https://blog.csdn.net/Achen2282751920/article/details/132349384

版权

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
    <style>
        .calculator {
            width: 200px;
            border: 1px solid #ccc;
            padding: 10px;
        }

        #screen {
            width: 100%;
            margin-bottom: 10px;
        }

        .buttons button {
            width: 30%;
            height: 40px;
            margin: 5px;
        }
    </style>
</head>

<body>
    <div class="calculator">
        <input type="text" id="screen" readonly>
        <div class="buttons">
            <button onclick="appendNumber(1)">1</button>
            <button onclick="appendNumber(2)">2</button>
            <button onclick="appendNumber(3)">3</button>
            <button onclick="appendNumber(4)">4</button>
            <button onclick="appendNumber(5)">5</button>
            <button onclick="appendNumber(6)">6</button>

            <button onclick="appendNumber(7)">7</button>
            <button onclick="appendNumber(8)">8</button>
            <button onclick="appendNumber(9)">9</button>
            <!-- 其他按钮 -->
            <button onclick="add()">+</button>
            <button onclick="subtract()">-</button>
            <button onclick="multiply()">*</button>
            <button onclick="divide()">/</button>
            <button onclick="calculate()">=</button>

        </div>
    </div>
    <script>
        function appendNumber(number) {
            var screen = document.getElementById('screen');
            screen.value += number;
        }
        function add() {
            var screen = document.getElementById('screen');
            screen.value += '+';
        }

        function subtract() {
            var screen = document.getElementById('screen');
            screen.value += '-';
        }

        function multiply() {
            var screen = document.getElementById('screen');
            screen.value += '*';
        }

        function divide() {
            var screen = document.getElementById('screen');
            screen.value += '/';
        }
        function calculate() {
            var screen = document.getElementById('screen');
            var result = eval(screen.value);
            screen.value = result;
        }

    </script>
</body>

</html>