数据载入中,请稍后......
 
展开
懒人码库客户端 点击或扫描下载
欢迎来到懒人码库!懒人码库QQ群:19651313
欢迎来到懒人码库!懒人码库QQ群:19651313  
当前位置:懒人码库 > 前端脚本 > jQuery

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

2017-01-16 14:34 来源:www.lanrenmaku.com / 作者:懒人 已被阅读:次 分类:jQuery 上一篇:$( function() {} );与( function($){} )(jQuery);的异同 下一篇:jQuery给动态添加的元素绑定事件的方法

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

 

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

源码:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <meta charset="utf-8">  
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">  
  7.   <!--  
  8.   <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />  
  9.   <link href="favicon.ico" rel="Bookmark" type="image/x-icon" />  
  10.   --> 
  11.   <meta name="Generator" content="EditPlus®">  
  12.   <meta name="Author" content="">  
  13.   <meta name="Keywords" content="">  
  14.   <meta name="Description" content="">  
  15.   <title>Document</title>  
  16.   <link href="" rel="stylesheet" />  
  17.   <style type="text/css">  
  18.     .progress{  
  19.       border:1px solid #000;  
  20.       text-align:center;  
  21.       height:5px;  
  22.       width:500px;  
  23.       margin:0 auto;  
  24.     }  
  25.     .progress-bar {  
  26.       background:#000;  
  27.       height:5px;  
  28.    
  29.     }  
  30.   </style>  
  31.   <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>  
  32. </head>  
  33. <body>  
  34.    
  35. <div id="" class="progress">  
  36.   <div id="probar" class="progress-bar"> </div>  
  37.   <h3 align="center"></h3>  
  38. </div>  
  39.    
  40. <script type="text/javascript">  
  41.    
  42. /*******  
  43. 方法一,setTimout()实现  
  44. ***************/  
  45.   var p = 0;  
  46.   var iid;  
  47.   var runtime = 6000/100; //默认6秒  
  48.   function goCount(){     
  49.     p++;  
  50.     $("h3").html(p+'%');  
  51.     $(".progress-bar").css("width",p+"%");  
  52.     if (p == 100)  
  53.     {  
  54.       clearInterval(iid);  
  55.       alert('进度条满了,切换下一项... do something');  
  56.     }  
  57.   }  
  58.   iid = setInterval(goCount,runtime);  
  59.    
  60.    
  61. /*******  
  62. 方法二,setTimout()实现  
  63. *************  
  64.   var p = 0;  
  65.   var tid;  
  66.   var runtime = 6000/100;  
  67.   function goCount(){    
  68.     p++;  
  69.     if (p <= 100)  
  70.     {  
  71.       //$(".progress-bar").html(p+'%');  
  72.       $(".progress-bar").css("width",p+"%");  
  73.       tid = setTimeout(goCount,runtime);  
  74.     } else {  
  75.       clearTimeout(tid);  
  76.       alert('进度条满了,切换下一项...');  
  77.     }  
  78.   }  
  79.   setTimeout(goCount,runtime);  
  80. ***************/  
  81. </script>  
  82. </body>  
  83. </html> 

 

小贴士:懒人码库 为网页前端人员提供建站常用的广告代码和网页特效,内容涵盖焦点图,导航菜单,jQuery代码,图片特效,对联广告,日历控件,在线客服等。