js篇1-1：div进度条状增长变色

最新推荐文章于 2022-10-05 23:14:26 发布

草莓味的狗儿

最新推荐文章于 2022-10-05 23:14:26 发布

阅读量380

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/weixin_42399736/article/details/91826101

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    
        <style type="text/css">
        #secai{
            background: #449D44;
            width: 100px;
            height: 30px;
            background: pink;
        }
    </style>
    <body>
            
        <script type="text/javascript">
	        window.onload=function (){
            var bb;
            document.getElementById("bian").onclick=function(){
                var jj=100;
                bb=setInterval(function () {
                    jj=jj+20;
                    document.getElementById("secai").style.width=jj+"px";
                        
                    if (jj==200) {           //设定长度在多少变色
                        document.getElementById("secai").style.background="#31B0D5";
                    
                    }
                    if (jj==400) {
                        document.getElementById("secai").style.background="#449D44";
                    
                    }
                    if (jj==800) {
                        document.getElementById("secai").style.background="#E38D13";
                    
                    }     
                
                },200) //1000毫秒等于一秒（进度的快慢）
                }
            }    
        </script>
        
        <div id="secai"></div>
        <input type="button" value="变色" id="bian"> //按钮
    </body>
</html>

草莓味的狗儿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js篇1-1：div进度条状增长变色

<html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> #secai{ backgrou...
复制链接

扫一扫

专栏目录