css+js实现进度滚动条

最新推荐文章于 2024-12-18 14:00:00 发布

原创最新推荐文章于 2024-12-18 14:00:00 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#进度条

前端插件专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用HTML、CSS及JavaScript实现一个简单的进度条效果。通过设置定时任务更新进度条的宽度来模拟进度变化，并利用CSS样式美化进度条外观。

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

思路：用到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>