正文

如何用jQuery实现点击按钮数字自动加1并显示求和结果？

/0 浏览量
0918

在这个问题中，我们将使用jQuery来创建一个简单的数字计数器，每当点击按钮时，数字会自动增加1，并且求和结果会实时显示在页面上。下面是具体的实现步骤和代码示例。

准备工作

首先，确保你的网页中已经引入了jQuery库。如果没有，可以通过CDN引入，如下所示：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

HTML结构

我们需要一个按钮来触发加1操作，以及一个显示当前数字和求和结果的元素。以下是HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数字计数器</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <button id="increment">加1</button>
    <div id="count">当前数字：0</div>
    <div id="sum">求和结果：0</div>
</body>
</html>

CSS样式（可选）

你可以根据需要添加一些CSS样式来美化页面。

#increment {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

#count, #sum {
    margin-top: 10px;
    font-size: 16px;
}

jQuery脚本

接下来，我们将编写jQuery脚本来实现数字的自动增加和求和结果显示。

$(document).ready(function() {
    var count = 0;
    var sum = 0;

    $('#increment').click(function() {
        count += 1;
        sum += count;
        $('#count').text('当前数字：' + count);
        $('#sum').text('求和结果：' + sum);
    });
});

这段代码做了以下几件事情：

  1. 当文档加载完成后，通过$(document).ready()函数初始化变量count和sum，分别用来存储当前数字和求和结果。
  2. 为按钮绑定一个点击事件处理函数。每当按钮被点击时，count变量增加1，同时更新求和结果sum。
  3. 使用$('#count').text('当前数字：' + count)和$('#sum').text('求和结果：' + sum)来更新页面上的显示。

现在，当你点击按钮时，页面上会显示当前数字和求和结果，每次点击都会使当前数字增加1，并更新求和结果。

这样，我们就成功地使用jQuery实现了一个简单的数字计数器。希望这个例子对你有所帮助！

-- 展开阅读全文 --