jquery 进度

原创

mob64ca12e83232 2023-10-02 11:57:06 ©著作权

文章标签 进度条 jQuery HTML 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12e83232的原创作品，请联系作者获取转载授权，否则将追究法律责任

实现jQuery进度条

简介

在网页开发中，经常需要展示任务的进度，而jQuery是一个广泛应用的JavaScript库，提供了丰富的功能和插件。本文将介绍如何使用jQuery实现一个简单的进度条。

整体流程

下面是实现jQuery进度条的整体流程：

gantt
    title jQuery进度条实现流程

    section 创建HTML结构
    创建HTML结构        :a1, 2022-01-01, 3d

    section 添加CSS样式
    添加CSS样式         :a2, after a1, 2d

    section 添加jQuery代码
    添加jQuery代码      :a3, after a2, 2d

    section 完成进度条
    完成进度条         :a4, after a3, 2d

创建HTML结构

首先，我们需要创建一个HTML结构来容纳进度条。代码如下：

<div id="progress-bar">
    <div id="progress"></div>
</div>

这段代码创建了一个id为progress-bar的<div>元素，里面嵌套了一个id为progress的子元素。

添加CSS样式

接下来，我们需要添加一些CSS样式来美化进度条。代码如下：

#progress-bar {
    width: 300px;
    height: 20px;
    background-color: #f0f0f0;
    border-radius: 10px;
}

#progress {
    width: 0%;
    height: 100%;
    background-color: #00ff00;
    border-radius: 10px;
}

这段代码设置了进度条的样式，包括宽度、高度、背景色和圆角等。

添加jQuery代码

现在，我们需要使用jQuery来控制进度条的进度。代码如下：

$(document).ready(function() {
    var progress = 0;
    var interval = setInterval(function() {
        progress += 10;
        $('#progress').css('width', progress + '%');
        if (progress >= 100) {
            clearInterval(interval);
        }
    }, 1000);
});

这段代码使用$(document).ready()函数来确保在文档加载完成后执行。首先，我们定义了一个变量progress来表示进度，初始值为0。然后，我们使用setInterval()函数每隔1秒执行一次回调函数。在回调函数中，我们将进度增加10，并使用$('#progress').css('width', progress + '%')来设置进度条的宽度。如果进度达到100或以上，我们使用clearInterval()函数停止定时器。

完成进度条

最后，我们需要在页面中引入jQuery和上述代码，来完成整个进度条的实现。

<!DOCTYPE html>
<html>
<head>
    <title>jQuery进度条</title>
    <script src="
    <style>
        /* CSS代码 */
    </style>
</head>
<body>
    <div id="progress-bar">
        <div id="progress"></div>
    </div>
    <script>
        // jQuery代码
    </script>
</body>
</html>

将上述代码保存为一个HTML文件，并在浏览器中打开，即可看到一个具有进度的进度条。