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

2019-11-19 18:08:59

字体：大中小

来源：转载

供稿：网友

定时进度条，进度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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：使用UrlConnection实现后台模拟http请求的简单实例

下一篇：12306 刷票脚本及稳固刷票脚本（防挂）