JQuery 加法计算器

最新推荐文章于 2024-01-16 12:47:42 发布

原创最新推荐文章于 2024-01-16 12:47:42 发布 · 554 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

JQuery 专栏收录该内容

57 篇文章

订阅专栏

本文介绍了一个基于HTML和jQuery的小型项目，通过简单的页面布局结合JavaScript代码实现了两个数值相加的功能。用户输入两个数字后，点击等号按钮即可在结果框中看到计算结果。该示例适用于初学者理解如何利用jQuery简化DOM操作。

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="scripts/jquery-1.7.1.min.js"></script>
    <script>
        $(function () {
            //为按钮绑定点击事件
            $('#btnAdd').click(function () {
                //获取文本框中的值，并转换成整数
                var num1 = parseInt($('#txtNum1').val());
                var num2 = parseInt($('#txtNum2').val());
                //运算
                var result = num1 + num2;
                //显示
                $('#txtResult').val(result);
            });
        });
    </script>
</head>
<body>
    <input type="text" id="txtNum1"/>+
    <input type="text" id="txtNum2"/>
    <input type="button" id="btnAdd" value="="/>
    <input type="text" id="txtResult"/>
</body>
</html>