前端做一个计算器

爱他123

于 2024-05-25 09:11:53 发布

阅读量438

点赞数 5

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/2402_84765445/article/details/139043730

版权

下面是一个简单的前端计算器的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>计算器</title>
    <style>
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 100px;
        }
        .input-group {
            display: flex;
            justify-content: center;
            margin-bottom: 10px;
        }
        .input-group > input {
            width: 200px;
            height: 30px;
            margin: 0 5px;
        }
        button {
            width: 50px;
            height: 30px;
        }
        #result {
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="input-group">
            <input type="number" id="num1" placeholder="输入第一个数字">
            <input type="number" id="num2" placeholder="输入第二个数字">
        </div>
        <div class="input-group">
            <button onclick="add()">+</button>
            <button onclick="subtract()">-</button>
            <button onclick="multiply()">*</button>
            <button onclick="divide()">/</button>
        </div>
        <div>
            <label>结果:</label>
            <span id="result"></span>
        </div>
    </div>

    <script>
        function add() {
            var num1 = parseFloat(document.getElementById("num1").value);
            var num2 = parseFloat(document.getElementById("num2").value);
            var result = num1 + num2;
            document.getElementById("result").innerText = result;
        }

        function subtract() {
            var num1 = parseFloat(document.getElementById("num1").value);
            var num2 = parseFloat(document.getElementById("num2").value);
            var result = num1 - num2;
            document.getElementById("result").innerText = result;
        }

        function multiply() {
            var num1 = parseFloat(document.getElementById("num1").value);
            var num2 = parseFloat(document.getElementById("num2").value);
            var result = num1 * num2;
            document.getElementById("result").innerText = result;
        }

        function divide() {
            var num1 = parseFloat(document.getElementById("num1").value);
            var num2 = parseFloat(document.getElementById("num2").value);
            var result = num1 / num2;
            document.getElementById("result").innerText = result;
        }
    </script>
</body>
</html>

这个计算器有两个输入框用于输入数字，然后有四个按钮用于执行加、减、乘、除操作。最后在页面上显示计算结果。你可以尝试在输入框中输入数字并点击相应的按钮进行计算。