AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

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

51自学网 http://www.wanshiok.com
js,定时进度条

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持wanshiok.com。


js,定时进度条  
上一篇:使用UrlConnection实现后台模拟http请求的简单实例  下一篇:12306 刷票脚本及稳固刷票脚本(防挂)