脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js定时进度条

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

 更新时间：2017年01月04日 14:28:57   作者：东成熙就  
这篇文章主要介绍了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>

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

您可能感兴趣的文章:

相关文章

  • JS实现页面导航与内容相互锚定实例详解

    JS实现页面导航与内容相互锚定实例详解

    这篇文章主要为大家介绍了JS实现页面导航与内容相互锚定实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-10-10
  • 使用JS监听键盘按下事件（keydown event）

    使用JS监听键盘按下事件（keydown event）

    这篇文章主要介绍了使用JS监听键盘按下事件（keydown event），本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-11-11
  • 页面定时刷新(1秒刷新一次)

    页面定时刷新(1秒刷新一次)

    页面定时刷新的示例想必大家也见到不少，在本文将为大家介绍的是，如何实现1秒刷新一次，感兴趣的朋友可以了解下本文
    2013-11-11
  • Bootstrap一款超好用的前端框架

    Bootstrap一款超好用的前端框架

    Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，用于开发响应式布局、移动设备优先的 WEB 项目。接下来通过本文给大家分享Bootstrap一款超好用的前端框架，感兴趣的朋友一起看看吧
    2017-09-09
  • 使用Bootstrap美化按钮实例代码(demo)

    使用Bootstrap美化按钮实例代码(demo)

    这篇文章主要介绍了使用Bootstrap美化按钮实例代码(demo),非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2017-02-02
  • JavaScript实现简易的天数计算器实例【附demo源码下载】

    JavaScript实现简易的天数计算器实例【附demo源码下载】

    这篇文章主要介绍了JavaScript实现简易的天数计算器,结合实例形式分析了javascript日期与时间计算的相关技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
    2017-01-01
  • 基于JavaScript实现在新的tab页打开url

    基于JavaScript实现在新的tab页打开url

    这篇文章主要介绍了基于JavaScript实现在新的tab页打开url 的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-08-08
  • 代码详解javascript模块加载器

    代码详解javascript模块加载器

    本篇文章通过代码示例给大家详细分析了javascript基础内容模块加载器的相关知识点，一起学习下。
    2018-03-03
  • js实现拖拽效果

    js实现拖拽效果

    本文主要是为了让大家更好的理解js的面向对象，通过实现拖拽效果向大家展示js面向对象，非常不错，这里推荐给大家。
    2015-02-02
  • ES6新特性之类(Class)和继承(Extends)相关概念与用法分析

    ES6新特性之类(Class)和继承(Extends)相关概念与用法分析

    这篇文章主要介绍了ES6新特性之类(Class)和继承(Extends)相关概念与用法,结合实例形式较为详细的分析了ES6中类(Class)和继承(Extends)的基本概念、语法、使用方法与注意事项,需要的朋友可以参考下
    2017-05-05

最新评论