zoukankan      html  css  js  c++  java
  • 进度条

    	<h3>进度条</h3>
    	<button onclick="start()">开始</button>
    	<button onclick="stop()">暂停</button>
    	<button onclick="end()">停止</button>
    	<hr>
    	<div id="wrap">
    		<div id="jd"></div>
    	</div>	
    	<script>
    		/*
    			扩展
    
    		*/ 
    		// 获取对象
    		var jdObj = document.getElementById("jd");
    	
    		// 设置定时器
    		var timer;
    		// 开始的位置
    		var i = 0;
    		var bj = false;  // 定时器没有运行的时候 false;
    
    		// 运行
    		function run(){
    			if(i>100){
    				clearInterval(timer);	
    			}else{
    				jdObj.style.width = i+'%';
    				i++;				
    			}
    		}
    
    		// 开始
    		function start(){
    			/*
    			if(bj){
    			}else{
    				bj = true;
    				timer = setInterval(run, 33)				
    			}*/
    			if(!bj){
    				bj = true;
    				timer = setInterval(run, 33)				
    			}
    		}
    
    		// 暂停
    		function stop(){
    			bj = false;
    			clearInterval(timer);
    		}
    
    		// 停止
    		function end(){
    			bj = false;
    			i = 0;
    			jdObj.style.width = '0';
    			clearInterval(timer);
    		}
    

      

  • 相关阅读:
    团队冲刺03
    梦断代码 阅读笔记02
    团队冲刺02
    团队冲刺01
    周总结
    团队工作任务
    阅读笔记3
    梦断代码阅读笔记01
    周总结
    NABCD项目分析
  • 原文地址:https://www.cnblogs.com/-qiang/p/5794381.html
Copyright © 2011-2022 走看看