js实现定时进度条完成后切换图片

定时进度条,进度100%以后可以切换图片等。

js实现定时进度条完成后切换图片


setInterval() setTimeout() 两个方法都可以实现。

源码:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width, initial-scale=1"> <!-- <link href="https://www.jb51.net/favicon.ico" type="image/x-icon" /> <link href="https://www.jb51.net/favicon.ico" type="image/x-icon" /> --> <meta content="EditPlus®"> <meta content=""> <meta content=""> <meta content=""> <title>Document</title> <link href="" /> <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="https://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script> </head> <body> <div> <div> </div> <h3></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>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwjzps.html