js、jQuery实现进度条至100%，颜色渐变~[亲测有效]

老牧童 • 2023-04-25 11:00 • 未分类 • 阅读 169

大家好，欢迎来到IT知识分享网。

js实现进度条至100%，

简单过程，可根据实际修改值，应用场景广。

style样式

<style>
        body>div{
            width: 230px;
            border: 1px solid white;
            position: relative;
        }

        .ab{
            width: 230px;
            height: 10px;
            border: 1px solid #ccc;
            overflow: hidden;
            margin: 50px 0;
            font-size: 5px;
        }
        .c{
            width: 2px;
            height: 80px;
            float: left;
        }
    </style>

js代码

<script>
        window.onload=function(){
            //上面的小盒子
            var aa=document.querySelector('.aa');
            //变量存储变化的数值
            var num=1;
            var num1=setInterval(function(){
                ++num;
                //将变化的数值装入aa这个div里面
                aa.innerHTML=num+++'%';
                //变量值为100的时候停止
                if(num>=100){
                    clearInterval(num1)
                }
                aa.style.left=(num-13)+'%';
            },30)
            
            
            var div=document.querySelector('.ab');
            var red=0,blue=0;green=0;
            setTimeout(fun,100)
            function fun(){
                //实现颜色的渐变效果
                div.innerHTML+='<div class="c" style="background:rgb(100,'+(++green)+',80)">';
                var stop=setTimeout(fun,10);
                if(green==130){
                    clearTimeout(stop)
                }
            }
        }
    </script>

HTML代码

<div>
        <!-- 上面的小盒子 -->
        <div class="aa"style="width: 32px;height: 20px;position: absolute;top:28px;left:         
        30px;"></div>
        <div class="ab"></div>
</div>

jQuery实现进度条的方法

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        #aa{
            width: 610px;
            height: 40px;
            /* border: 1px solid red; */
            margin: 50px 30px;
            overflow: hidden;
        }
        .ab{
            width: 2px;
            height: 100px;
            float: left;
        }
        .ac{
            width: 35px;
            height: 20px;
            /* border: 1px solid blue; */
            position:relative;
        }
    </style>
    <!-- 引用jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>

    <!-- 多个浏览器前进的速度不一致，需要修改下面进度条前进的数值 -->
    <script>
        $(function(){
            //创建div盒子
            var di=$('<div id="aa"></div>');
            $('body').append(di);//添加进body里面
            //创建小盒子
            var de=$('<div class="ac"></div>');
            $(di).append(de);
            var jd=0;
            var num2=0;
            $('.ac').html(0+'%')
            setTimeout(f1,100)
            function f1(){
                jd++;
                num2+=5.65; //这里设置距离左边的边距
                if(jd==101){
                    clearInterval(num1)
                }
                $('.ac').html(jd+'%')
                $('.ac').attr({
                    'style':function(){
                        return 'margin-left:'+num2+'px' //这里控制进度条上面的数值左边距
                    }
                })
                setTimeout(f1,26)
               //这里控制进条前进的速度
            }
            var red=0,blue=255;
            var num=setInterval(fun,10);
            function fun(){ 
                di.html(di.html()+'<div class="ab" style="background:rgb('+(++red)+',0,'+(--blue)+')"></div>');
                if(red>=295){ //这里可以控制进度条的长度
                    clearInterval(num)
                }
            }
        })
    </script>
</head>
<body>
</body>
</html>

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/26634.html

js、jQuery实现进度条至100%，颜色渐变~[亲测有效]

相关推荐

发表回复