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>

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

# js # 定时进度条 # js实现增加数字显示的环形进度条效果 # JavaScript实现水平进度条拖拽效果 # JSP数据分页导出下载显示进度条样式 # JS插件plupload.js实现多图上传并显示进度条 # JS实现环形进度条（从0到100%）效果 # js ajax加载时的进度条代码 # pace.js页面加载进度条插件 # JavaScript实现网页加载进度条代码超简单 # js插件YprogressBar实现漂亮的进度条效果 # javascript 网页进度条简单实例 # 进度条 # 满了 # 可以实现 # 大家多多 # viewport # edge # width # initial # device # content # http # utf # equiv # Compatible # UA # icon # shortcut # type # Bookmark # image

返回目录在线咨询

上一篇：版权头像免费制作网站有哪些,平台使用动漫头像的图片作为用户可选头像算侵权吗？
下一篇：php文件怎么变mp4格式校验_验证php转mp4是否成功技巧【技巧】

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求