zoukankan      html  css  js  c++  java
  • JS实现进度条效果

    源代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<style type="text/css">
    		*{
    			margin: 0px auto;
    		}
    		#wk{
    			 800px;
    			height: 100px;
    			border: 1px solid black;
    		}
    		#zb{
    			height: 100px;
    			
    			background-color: red;
    			float: left;
    		}
    		#yb{
    			
    			height: 100px;
    			background-color: blue;
    			float: left;
    		}
    	</style>
    	<body>
    		<div id="wk">
    			<div id="zb" style=" 50px;">
    				
    			</div>
    			<div id="yb" style=" 750px;">
    				
    			</div>
    		</div>
    	</body>
    	<script type="text/javascript">
    		var zb = document.getElementById('zb');
    		var yb = document.getElementById('yb');
    		var w = window.setInterval("Hua()",20);//调用函数,赋给一个变量方便清除调用
    	
    		function Hua(){
    			
    			if (parseInt(zb.style.width) == 750 ) {
    				window.clearInterval(w);   //清除调用
    				return;						//停止函数
    			}
    			zb.style.width = parseInt(zb.style.width)+4 +"px";
    			yb.style.width = parseInt(yb.style.width)-4 +"px";
    		
    			
    		}
    	</script>
    </html>
    

      效果如下:

  • 相关阅读:
    XML基础总结
    异常处理
    集合总结
    事件源与监听器
    JAVA中的GUI---swing 和awt
    docker搭建wordpress
    Jenkins--第四关_扩展
    docker 安装centos 7
    Jenkins_第五关_系统管理(1)
    Jenkins--第三关_Gitlab安装和配置(续)
  • 原文地址:https://www.cnblogs.com/davis16/p/8376080.html
Copyright © 2011-2022 走看看