定時進度條，進度100%以后可以切換圖片等。
setInterval() 和setTimeout() 兩個方法都可以實現。
源碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" /> <link href="favicon.ico" rel="Bookmark" type="image/x-icon" /> --> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <link href="" rel="stylesheet" /> <style type="text/css"> .progress{ border:1px solid #000; text-align:center; height:5px; width:500px; margin:0 auto; } .progress-bar { background:#000; height:5px; } </style> <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script> </head> <body> <div id="" class="progress"> <div id="probar" class="progress-bar"> </div> <h3 align="center"></h3> </div> <script type="text/javascript"> /******* 方法一，setTimout()實現 ***************/ var p = 0; var iid; var runtime = 6000/100; //默認6秒 function goCount(){ p++; $("h3").html(p+'%'); $(".progress-bar").css("width",p+"%"); if (p == 100) { clearInterval(iid); alert('進度條滿了,切換下一項... do something'); } } iid = setInterval(goCount,runtime); /******* 方法二，setTimout()實現 ************* var p = 0; var tid; var runtime = 6000/100; function goCount(){ p++; if (p <= 100) { //$(".progress-bar").html(p+'%'); $(".progress-bar").css("width",p+"%"); tid = setTimeout(goCount,runtime); } else { clearTimeout(tid); alert('進度條滿了,切換下一項...'); } } setTimeout(goCount,runtime); ***************/ </script> </body> </html> 以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
