5.18改背景进度条

Posted sun1987

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了5.18改背景进度条相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin:0;
                padding: 0;
            }
            .xw{
                width: 100px;
                height: 80px;
                border: 1px solid black;
                float: left;
                text-align: center;
                line-height: 80px;
            }
            .xw:hover{
                cursor: pointer;
            }
            .xw1{
                background-color:blue;
            }
            .xw2{
                background-color:greenyellow;
            }
            .xw3{
                background-color:red;
            }
            .xw4{
                background-color:yellow;
            }
            #nr1{
                width: 400px;
                height: 400px;
                border: 1px solid red;
                background-color: blue;
            }
            #jd{
                width:500px;
                height: 20px;
                border: 1px solid black;
            }
            #nei{
                width:0px;
                height: 20px;
                background-color: blue;
            
            }
            
        </style>
    </head>
    <body>
        <div id="nr">
            <div class=\'xw xw1\' onclick="gb(\'blue\')">国内新闻</div>
            <div class=\'xw xw2\' onclick="gb(\'greenyellow\')">国际新闻</div>
            <div class=\'xw xw3\' onclick="gb(\'red\')">体育新闻</div>
            <div class=\'xw xw4\' onclick="gb(\'yellow\')">娱乐新闻</div>
        </div>
        <div id="nr1"></div>
        <br /><br /><br /><br />
        <div id="jd">
            <div id="nei">
                
            </div>
        </div>
         <br /><br /><br /><br />
          <br /><br /><br /><br />
          
        
        
    </body>
</html>
<script type="text/javascript">
    window.onload=function(){//页面加载完成才执行里面的代码
            jdt();
    }
    function gb(a) {
        var b=document.getElementById("nr1");
        b.style.backgroundColor=a;
    }
    function jdt() {
        var c=document.getElementById("nei");
        c.style.transition="3s";
        c.style.width="500px";
        
    }

    
</script>

 

 

以上是关于5.18改背景进度条的主要内容，如果未能解决你的问题，请参考以下文章

27.QT-QProgressBar动态实现多彩进度条(详解)

Qt中progressbar进度的颜色和背景色怎么设置

当片段视图加载是异步任务的一部分时，如何在片段加载之前显示进度条？

自定义对话框片段内的进度条 - 如何从 AsyncTask 传递进度？

在recyclerview片段Reandroid中屏幕旋转后进度条不显示

android 进度条样式 怎么改