定时进度条，进度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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
