4.8进度条

Posted 2020-10-30 o728

tags:

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

进度条        <div id="tiao" style="width:500px; height:30px; border:1px solid #333;">
	         <div id="jindu" style="width:0px; height:30px; background-color:#00F;">0%</div>

js部分    window.setTimeout("tiao()",20)
    function tiao()
	{
		var y = document.getElementById("tiao");
		var z = document.getElementById("jindu");
		var l = y.style.width;
		var i = z.style.width;
		var m = parseInt(l.substr(0,l.length-2));
		var n = parseInt(i.substr(0,l.length-2));
		if(n<m)
		{
			n = n+2;
			jindu.style.width = n+"px";
			window.setTimeout("tiao()",20)
		}
		
		
	}                                             获取两个div的宽，让第二个用间隔或延迟递加到等于第一个的宽  获取属性截取字符串取整 比较

<style type="text/css">
            #kuang{
                width:800px;
                height:300px;
                }
            #zuo{
                
                height:300px;
                background-color:red;
                float:left;}
            #you{
                
                height:300px;
                background-color:blue;
                float:left;}
            #an{
                width:50px;
                height:50px;
                background-color:#000;
                position:absolute;
                top:125px;
                
                }
        </style>
    </head>
    
    <body>
        <div id="kuang">
            <div id="zuo" style="width:200px;"></div>
            <div id="you" style="width:600px;"></div>
        </div>
        <div id="an" onclick="Zou()" ondblclick="hui()" style="left:180px;"></div>
    </body>
    <script type="text/javascript">
        var id;
        function Zou()
        {
            //执行间隔语句    
            id = window.setInterval("Jin()",20);
        }
        
        //调起的函数
        function Jin()
        {
            //改变红色的宽度
            var zuo = document.getElementById("zuo");
            var zw = zuo.style.width;    
            //截取字符串
            var zc = parseInt(zw.substr(0,zw.length-2));
            if(zc>=600)
            {
                window.clearInterval(id);    
                return;
            }
            zc = zc+2;
            zuo.style.width = zc+"px";
            
            //蓝色的宽度
            var you = document.getElementById("you");
            var yw = you.style.width;
            var yc = parseInt(yw.substr(0,yw.length-2));
            yc = yc-2;
            you.style.width = yc+"px";
            
            //黑色的位置
            var an = document.getElementById("an");
            var al = an.style.left;
            var ac = parseInt(al.substr(0,al.length-2));
            ac = ac+2;
            an.style.left = ac+"px";
        }

技术分享图片

点击黑色红色向右扩大，蓝色向右缩小，图片的一种效果

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

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

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

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

css Bootstrap 3进度条片段

进度条不隐藏是当数据在片段中的recyclerview中加载时

用于 onActivityCreated 中通用图像加载器的片段中进度条的 NullPointerException