利用JavaScript实现进度条加载界面(让你最简单最轻松学会+详写注释+完整代码)

最新推荐文章于 2024-06-11 10:47:56 发布

Tang_jibin

最新推荐文章于 2024-06-11 10:47:56 发布

阅读量2.9k

点赞数 1

分类专栏： JavaScript专栏文章标签： javascript css html

本文链接：https://blog.csdn.net/Tang_jibin/article/details/129900346

版权

JavaScript专栏专栏收录该内容

8 篇文章 1 订阅

订阅专栏

手把手教你完成进度条的制作

在此之前，你需要对制作进度条有一个大概框架，只有框架构思好，才能完成心之所想。下面我就来给大家分析一下搭建思路

思路分析
首先我们需要明白进度条的组成：一个容器+一个内容区+定时器
然后我们只需要把容器设置一个固定宽高，而内容区只需要一个高度足矣.
接下来我们需要考虑的就是定时器的设置，让它能从0%-100%，最后显示加载完成

效果图如下

在这里插入图片描述

网页搭建

<body>
    <!-- 大盒子 -->
    <div id="contain">
        <!-- 内容 -->
        <div id="content"></div>
    </div>
</body>

页面搭建完还比较简陋,那么就需要利用css进行渲染处理

样式渲染

<style>
        /*  外部容器样式*/
        #contain {
            width: 300px;
            height: 20px;
            outline: 2px solid black;
            border-radius: 10px;
            background-color: pink;
            position: relative;
            overflow: hidden;
        }

        /*  内容区样式*/
        #content {
            width: 0px;
            height: 20px;
            outline: 2px solid black;
            border-radius: 10px;
            background-color: aqua;

        }

        span {
            width: 60px;
            line-height: 20px;
            position: absolute;
            text-align: center;
            left: calc(50% - 20px);
            font-size: 12px;
        }
    </style>

页面渲染完毕,就需要配合js代码进行页面的交互

JS代码

<script>
    //获取标签节点
    let contain = document.querySelector("#contain");
    let content = document.querySelector("#content");

    //获取容器的宽度
    let contain_width = parseFloat(window.getComputedStyle(contain)["width"]);

    //在函数外定义一次就行，减少重复代码
    let content_width;
    let timer;

    //求进度条与容器间的倍数
    let bei = 100 / contain_width;

    //定义一个初始值用于后续判断的结束条件
    let num = 0;

    //设置延时器,每隔一秒运动1%
    timer = setInterval(function () {
        //更新内容宽度（即加载进度条）
        content_width = content.style["width"] = num + "px";
        //当num达到容器宽度则清除定时器
        if (num == contain_width) {
            clearInterval(timer);
        }
        //在num未达到容器宽度时，进度条数据实时更新，而parseInt(num * bei)是为了让进度条只显示整数。
        content.innerHTML = `<span>${parseInt(num * bei)}%</span>`;
        num++;
        //当加载到100%时,显示加载完毕
        if (content.innerHTML == "<span>100%</span>") {
            content.innerHTML = `<span>加载完成</span>`;
        }

    }, 500);
</script>

完整代码

<!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>
        /*  外部容器样式*/
        #contain {
            width: 300px;
            height: 20px;
            outline: 2px solid black;
            border-radius: 10px;
            background-color: pink;
            position: relative;
            overflow: hidden;
        }

        /*  内容区样式*/
        #content {
            width: 0px;
            height: 20px;
            outline: 2px solid black;
            border-radius: 10px;
            background-color: aqua;

        }

        span {
            width: 60px;
            line-height: 20px;
            position: absolute;
            text-align: center;
            left: calc(50% - 20px);
            font-size: 12px;
        }
    </style>
</head>

<body>
    <!-- 大盒子 -->
    <div id="contain">
        <!-- 内容 -->
        <div id="content"></div>
    </div>
</body>
<script>
    //获取标签节点
    let contain = document.querySelector("#contain");
    let content = document.querySelector("#content");

    //获取容器的宽度
    let contain_width = parseFloat(window.getComputedStyle(contain)["width"]);

    //在函数外定义一次就行，减少重复代码
    let content_width;
    let timer;

    //求进度条与容器间的倍数
    let bei = 100 / contain_width;

    //定义一个初始值用于后续判断的结束条件
    let num = 0;

    //设置延时器,每隔一秒运动1%
    timer = setInterval(function () {
        //更新内容宽度（即加载进度条）
        content_width = content.style["width"] = num + "px";
        //当num达到容器宽度则清除定时器
        if (num == contain_width) {
            clearInterval(timer);
        }
        //在num未达到容器宽度时，进度条数据实时更新，而parseInt(num * bei)是为了让进度条只显示整数。
        content.innerHTML = `<span>${parseInt(num * bei)}%</span>`;
        num++;
        //当加载到100%时,显示加载完毕
        if (content.innerHTML == "<span>100%</span>") {
            content.innerHTML = `<span>加载完成</span>`;
        }

    }, 500);
</script>

</html>

Tang_jibin

关注

1
点赞
踩
17

收藏

觉得还不错? 一键收藏
1
评论
利用JavaScript实现进度条加载界面(让你最简单最轻松学会+详写注释+完整代码)

在此之前，你需要对制作进度条有一个大概框架，只有框架构思好，才能完成心之所想。下面我就来给大家分析一下搭建思路思路分析首先我们需要明白进度条的组成：一个容器+一个内容区+定时器然后我们只需要把容器设置一个固定宽高，而内容区只需要一个高度足矣.接下来我们需要考虑的就是定时器的设置，让它能从0%-100%，最后显示加载完成。
复制链接

扫一扫