css+js实现进度滚动条

最新推荐文章于 2023-12-26 15:00:00 发布

yuan487639

最新推荐文章于 2023-12-26 15:00:00 发布

阅读量1.2k

点赞数

分类专栏：前端插件文章标签：进度条

本文链接：https://blog.csdn.net/yuan487639/article/details/76084913

版权

前端插件专栏收录该内容

6 篇文章 0 订阅

订阅专栏

思路：用到js方法需要有一个类似java的调度器，每隔多少秒执行一次；css方面，是一个父子标签，父标签长宽固定，子标签宽度被js控制，子标签的背景色表示进度条；结合后台使用时，实际上是不断地像后台发送请求，后来根据处理进度反馈数据

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
</head>  
<style type="text/css">  
    * {  
        padding: 0;  
        margin: 0;  
    }  

    .process-parent {  
        position: absolute;  
        width: 400px;  
        border: 1px solid #ccc;  
        height: 10px;  
        border-radius: 3px;  

    }  

    .process-son {  
        position: relative;  
        background: #ff0000;  
        height: 100%;  
        font-size: 8px;  
        text-align: center;  
        color: #fff;  
    }  
</style>  


<body>  

<div class="process-parent">  
    <div class="process-son" id="bar" style="width: 0%;">  
    </div>  
</div>  
</body>  
<script type="text/javascript">  
    function run() {  
        var bar = document.getElementById("bar");  
        bar.style.width = parseInt(bar.style.width) + 1 + "%";  
        bar.innerText = bar.style.width;  
        if (bar.style.width == "100%") {  
            clearTimeout(timeout);  
            return;  
        }  
        var timeout = setTimeout('run()', 300);  
    }  
    window.onload = run();  
</script>  
</html>

yuan487639

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css+js实现进度滚动条

思路：用到js方法需要有一个类似java的调度器，每隔多少秒执行一次；css方面，是一个父子标签，父标签长宽固定，子标签宽度被js控制，子标签的背景色表示进度条；结合后台使用时，实际上是不断地像后台发送请求，后来根据处理进度反馈数据<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <titl
复制链接

扫一扫

专栏目录