使用JQuery制作的网页计算器（加法）

最新推荐文章于 2023-06-13 19:19:43 发布

原创最新推荐文章于 2023-06-13 19:19:43 发布 · 1.0k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JQuery #网页计算器

HTML 专栏收录该内容

18 篇文章

订阅专栏

这个博客展示了一个使用jQuery编写的网页加法计算器。用户可以输入两个数，点击等号按钮后，计算器将显示两数之和。代码中通过jQuery监听按钮点击事件，获取输入框的数值并进行相加操作。

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

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <style>
        td {
            text-align: center;
        }
    </style>
    <script src="Scripts/jquery-1.11.3.js"></script>
    <script>
        $(function () {
            $("#BtnEqual").click(function () {
                var num1 = parseFloat($("#num1").val());
                var num2 = parseFloat($("#num2").val());
                //add = num1 + num2;
                //$("#Add").val(add);
                $("#Add").val(num1 + num2);
            })
        })
    </script>
</head>
<body>
    <table align="center">
        <tr>
            <td>
                第一个数
            </td>
            <td>
                操作
            </td>
            <td>
                第二个数
            </td>
            <td>
                等于
            </td>
            <td>
                结果
            </td>
        </tr>
        <tr>
            <td>
                <input id="num1" type="text" />
            </td>
            <td>
                +
            </td>
            <td>
                <input id="num2" type="text" />
            </td>
            <td>
                <input id="BtnEqual" type="button" value="=" />
            </td>
            <td>
                <input id="Add" type="text" />
            </td>
        </tr>
    </table>
</body>
</html>