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>

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

赞 (0)

相关推荐

  • js ajax加载时的进度条代码

    js ajax加载时的进度条代码

    最终效果如下图所示,pc和移动端都可以展示的,调用方法也很简单,开始调用:loading.baosight.showPageLoadingMsg(false),alse代表不现实加载说明,true展示加载说明.调用完成后调用:loading.baosight.hidePageLoadingMsg(),在整个代码里有两个文件,一个是js文件,一个是css文件.切记不要忘记引入jquery.js css文件 #_loadMsg{ display: inline-block; width: 100%;

  • javascript 网页进度条简单实例

    javascript 网页进度条简单实例 最近学习新的知识,遇到一个小功能网页进度条,发现一篇文章还是不错的,这里记录下,也许能帮助到大家, 实例代码: <!DOCTYPE html> <html> <head> <style> #box {float:left;width:100%;height:18px;border:1px solid;} #bar {float:left;width:100%;height:18px;border:0px;backgr

  • JavaScript实现网页加载进度条代码超简单

    网页进度条能够更好的反应当前网页的加载进度情况,loading进度条可用动画的形式从开始0%到100%完成网页加载这一过程.但是目前的浏览器并没有提供页面加载进度方面的接口,也就是说页面还无法准确返回页面实际加载的进度,本文中我们使用jQuery来实现页面加载进度条效果. HTML 首先我们要知道的是,目前没有任何浏览器可以直接获取正在加载对象的大小.所以我们无法通过数据大小来实现0-100%的加载显示过程. 因此我们需要通过html代码逐行加载的特性,在整页代码的若干个跳跃行数中设置节点,进行

  • js插件YprogressBar实现漂亮的进度条效果

    js插件YprogressBar实现漂亮的进度条效果

    简介 YprogressBar是一款基于HTML5的进度条插件. YprogressBar是一款轻量级进度条插件,使用方便,资源占用少,模仿好压的解压界面,带有数字显示,同时支持在描述中增加参数,以动态显示更详细的执行信息,比如上传速度.剩余时间等等. YprogressBar代码书写简洁,结构设计合理,不会给您的系统带来不良影响. 界面预览  使用说明 文件引用 只需引用yprogressbar.css和yprogressbar.js文件即可. 使用概览 var ypb = new Yprog

  • js实现增加数字显示的环形进度条效果

    js实现增加数字显示的环形进度条效果

    效果如下: 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <link> <meta name="page-view-size" content="640*530"> <meta http-equiv="Content-Type" content="text/

  • pace.js页面加载进度条插件

    pace.js页面加载进度条插件

    本文简单介绍插件pace.js. 在页面中引入Pace.js,页面就会自动监测你的请求(包括Ajax请求),在事件循环滞后,会在页面记录加载的状态以及进度情况.此插件的兼容性很好,可以兼容IE8以上的所有主流插件,而且其强大之处在于,你还可以引入加载进度条的主题样式,你可以选择任意颜色和多种动画效果(例如简约.闪光灯,MAC OSX,左侧填充,顶部填充,计数器和弹跳等等动画效果),如果你擅长修改css动画,那你就可以做出无限种可能性的动画,为你的网站增添个性化特色! 调用方法: 引入Pace.j

  • JS实现环形进度条（从0到100%）效果

    JS实现环形进度条（从0到100%）效果

    最近公司项目中要用到这种类似环形进度条的效果,初始就从0开始动画到100%结束.动画结果始终会停留在100%上,并不会到因为数据的关系停留在一半. 如图 代码如下 demo.html <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=

  • JSP数据分页导出下载显示进度条样式

    1.思路 分页数据查询,同时缓存设置进度(为当前取出数据点总数据比例) 2.界面进度条 为 异步请求缓存比例 3.代码 css: body{ position:relative; } .mask{ position:absolute; left:0px; top:0px; height:100%; width:100%; background-color: #eee; display:none; filter:alpha(opacity=50); /*IE滤镜,透明度50%*/ -moz-opa

  • JavaScript实现水平进度条拖拽效果

    JavaScript实现水平进度条拖拽效果

    本文实例为大家分享水平进度条拖拽效果的js具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .scroll{ margin:100px; width: 500px; height: 5px; background: #ccc; posit

  • JS插件plupload.js实现多图上传并显示进度条

    本文实例为大家分享了plupload.js多图上传的具体代码,供大家参考,具体内容如下 HTML代码: <!DOCTYPE html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

随机推荐