简单的加法计算器_制作加法计算器-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_48893127/article/details/129409015

该文章提供了一个使用HTML、CSS和JavaScript实现的加法计算器示例。用户可以输入两个数字，点击等于按钮后，程序会将这两个数字相加，并将结果显示在最后一个输入框中。关键功能涉及DOM操作和事件监听。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>
        .box {
            width: 453px;
            height: 351px;
            background: #e4f0e3;
            margin: 10px auto;
            text-align: center;
            box-sizing: border-box;
            padding-top: 10px;
            padding-right: 50px;
        }

        .box h1 {

            margin-bottom: 20px;
        }

        .box input,
        button {
            width: 297px;
            height: 40px;
            border: 2px solid #999;
            margin: 10px 0px;
            margin-left: 10px;
            outline: none;
            box-sizing: border-box;

        }

        button {
            background: #00aa00;
            color: #fff;
        }

        form {
            text-align: right;
        }
    </style>
</head>

<body>
   
    <!-- 加法计算器 -->
    <div class="box">
        <h1>加法计算器</h1>
        <form action="#">
            <div>
                加数1: <input type="text" id="num1">
            </div>
            <div>
                加数2: <input type="text" id="num2">
            </div>
            <div>
                <button>=</button>
            </div>
            <div>
                结果: <input type="text" id="sum">
            </div>
        </form>
    </div>
<!-- 1.	拓展题: 在网页上制作一个简易的计算器，设置三个input输入框和一个按钮，点击=按钮时获取到两个输入框的值，将两个值相加，并显示到最后一个输入框中。（考点：编程思维、变量使用、运算符、DOM操作、事件） -->
    <!-- js代码 -->
    <script>
        // 获取
        
        let num1 = document.getElementById("num1");
        let num2 = document.getElementById("num2");
        let btn= document.querySelector("button");
        let sum = document.getElementById("sum");
        // console.log(num1);
        btn.onclick=function(){
            sum.value=Number(num1.value)+Number(num2.value);
            // console.log(sum);
        }
    </script>
</body>

</html>