这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 js 实现定时进度条, 进度 100% 以后可以切换图片,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
定时进度条,进度 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>
来源: http://www.phperz.com/article/17/0704/328894.html