JS实现进度条

最新推荐文章于 2024-05-07 15:08:09 发布

小萝莉_Lolita

最新推荐文章于 2024-05-07 15:08:09 发布

阅读量827

点赞数

分类专栏： JavaScript 文章标签： javascript 进度条

本文链接：https://blog.csdn.net/MDreamlove/article/details/77587343

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

超时函数控制，每隔一秒钟就会执行指定的超时函数，再指定的超时函数里设置进度条的标签的长度，即可完成进度条的显示。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>进度条设计</title>
    <style>
        #frame{
            overflow: hidden;
            width: 300px;
            border-radius: 50px;
            border:2px solid black;
            border-bottom-width: 4px;
            border-top-width: 3px;
        }
        .border{
            margin:15px 30px;
            border:2px solid black;
            height: 30px;
            overflow: hidden;
            position: relative;
        }
        .bar{
            width: 5%;
            height: 100%;
            background:pink;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
            transition:all 0.1 ease-in-out 0s;
        }
        .percentage{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            text-align: center;
            padding:5px;
            color:#f9ec75;
            font-weight: bold;
        }
    </style>
    <script>
        window.setTimeout('update();', 0);
        function update(){
            var frm = document.getElementById('frame');
            var list = document.getElementsByTagName('div');
            var bar;
            for(var i=0;i<list.length;i++){
                if(list[i].className == 'bar'){
                    bar = list[i];
                }
            }
            if(bar.style.width == ''){
                bar.style.width = '6%';
            }else{
                bar.style.width = parseInt(bar.style.width)+1+'%';
            }
            bar.nextSibling.nextSibling.textContent = parseInt(bar.style.width)-5+'%';
            if(bar.style.width != '105%'){
                window.setTimeout('update();', 100);
            }
        }
    </script>
</head>
<body>
<div id="frame">
    <div class="border">
        <div class="bar"></div>
        <div class="percentage">0%</div>
    </div>
</div>
</body>
</html>

效果图：
这里写图片描述

代码分析：
最内部div用户绘制进度条，其外面的div标签用于绘制装载进度条的狹槽，最外部的div标签用于绘制外壳效果。
在本程序的运行中，发现有停滞效果，这是因为JavaScript程序和CSS3的transition属性不一致所造成的。如果希望进度条过度顺利可以取消超时函数里面的超时重设，并直接将进度条设置为超过100%，并将transition属性的变化时间设置为较长的时间即可。

小萝莉_Lolita

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS实现进度条

超时函数控制，每隔一秒钟就会执行指定的超时函数，再指定的超时函数里设置进度条的标签的长度，即可完成进度条的显示。<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>进度条设计</title> <style> #frame{ overflow: hidden;
复制链接

扫一扫