JS小项目-计算器

需求:根据素材制作如图所示页面,在页面输入第一个数和第二个数,单击+(加)、-(减)、*(乘)、/(除)按钮时,实现两个数的相应运算

Code

javascript 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
    <style>
        .btn-spacing {
            margin-right: 24px;
            /* 可以根据需要调整间距 */
        }
        
        button {
            width: 40px;
            height: 20px;
        }
    </style>
</head>

<body>

    <!-- 输入框用于输入两个数字 -->
    <label for="num1">第一个数 </label>
    <input type="number" id="num1"><br><br>

    <label for="num2">第二个数 </label>
    <input type="number" id="num2"><br><br>

    <!-- 按钮用于执行加法、减法、乘法和除法运算 -->
    <button onclick="add()" class="btn-spacing">+</button>
    <button onclick="subtract()" class="btn-spacing">-</button>
    <button onclick="multiply()" class="btn-spacing">*</button>
    <button onclick="divide()">/</button>
    <br><br>

    <!-- 显示结果的文本框 -->
    <label for="result">计算结果 </label>
    <input type="text" id="result" readonly>

    <script>
        // 加法函数
        function add() {
            var num1 = parseFloat(document.getElementById("num1").value);
            var num2 = parseFloat(document.getElementById("num2").value);
            var result = num1 + num2;
            document.getElementById("result").value = result;
        }

        // 减法函数
        function subtract() {
            var num1 = parseFloat(document.getElementById("num1").value);
            var num2 = parseFloat(document.getElementById("num2").value);
            var result = num1 - num2;
            document.getElementById("result").value = result;
        }

        // 乘法函数
        function multiply() {
            var num1 = parseFloat(document.getElementById("num1").value);
            var num2 = parseFloat(document.getElementById("num2").value);
            var result = num1 * num2;
            document.getElementById("result").value = result;
        }

        // 除法函数
        function divide() {
            var num1 = parseFloat(document.getElementById("num1").value);
            var num2 = parseFloat(document.getElementById("num2").value);
            if (num2 === 0) {
                document.getElementById("result").value = "Cannot divide by zero!";
            } else {
                var result = num1 / num2;
                document.getElementById("result").value = result;
            }
        }
    </script>

</body>

</html>

效果

相关推荐
不学无术の码农2 分钟前
《Effective Python》第九章 并发与并行——总结(基于物流订单处理系统)
开发语言·python
快起来别睡了4 分钟前
深入理解 JavaScript 中的 `this`:从底层原理到实践应用
javascript
梅一一5 分钟前
JavaScript 通吃指南:从浏览器到你的LED灯
前端·javascript·后端
阿珊和她的猫9 分钟前
`shallowReactive` 与 `shallowRef`:浅层响应式 API
前端·javascript·vue.js·typescript·状态模式
@forever@12 分钟前
【JAVA】数组的使用
java·开发语言·python
喵手16 分钟前
使用 Java 集合进行缓存系统设计的实践分享!
java·开发语言·缓存
小猫咪怎么会有坏心思呢25 分钟前
华为OD机考-最小循环子数组-字符串(JAVA 2025B卷)
java·开发语言·华为od
fly啊38 分钟前
app Router VS pages Router(Next.js学习笔记)
前端·javascript·react.js
coding随想1 小时前
*JavaScript 中的反射:用 Reflect 对象掌控对象的“自我认知”
开发语言·javascript·ecmascript
夜空晚星灿烂1 小时前
C# 网络编程-关于HttpClient使用方式(三)
开发语言·网络·c#