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


Posted in Javascript onJanuary 04, 2017

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

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

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery跨Iframe选择实现代码
Aug 19 Javascript
JavaScript 类型的包装对象(Typed Wrappers)
Oct 27 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
Dec 12 Javascript
Function.prototype.call.apply结合用法分析示例
Jul 03 Javascript
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
Sep 22 Javascript
jquery实现搜索框常见效果的方法
Jan 22 Javascript
jQuery遍历json的方法分析
Apr 16 Javascript
addEventListener()与removeEventListener()解析
Apr 20 Javascript
JS实现动态添加DOM节点和事件的方法示例
Apr 28 Javascript
利用types增强vscode中js代码提示功能详解
Jul 07 Javascript
Vue 嵌套路由使用总结(推荐)
Jan 13 Javascript
关于AngularJS中几种Providers的区别总结
May 17 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
Jan 04 #Javascript
深入理解JavaScript中的预解析
Jan 04 #Javascript
jQuery操作json常用方法示例
Jan 04 #Javascript
Bootstrap select下拉联动(jQuery cxselect)
Jan 04 #Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
Jan 04 #Javascript
过期软件破解办法实例详解
Jan 04 #Javascript
jQuery.Validate表单验证插件的使用示例详解
Jan 04 #Javascript
You might like
PHP编码规范-php coding standard
2007/03/16 PHP
Zend Studio (eclipse)使用速度优化方法
2011/03/23 PHP
php获取301跳转URL简单实例
2013/12/16 PHP
如何解决PHP无法实现多线程的问题
2015/09/25 PHP
php解析mht文件转换成html的实例
2017/03/13 PHP
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
2012/12/12 Javascript
jquery DIV撑大让滚动条滚到最底部代码
2013/06/06 Javascript
表单元素与非表单元素刷新区别详细解析
2013/11/06 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
2013/12/14 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
JavaScript面向对象编程入门教程
2014/04/16 Javascript
功能强大的Bootstrap使用手册(一)
2016/08/02 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
2016/11/23 Javascript
基于jQuery制作小图标上下滑动特效
2017/01/18 Javascript
JS实现css hover操作的方法示例
2017/04/07 Javascript
webpack实现热更新(实施同步刷新)
2017/07/28 Javascript
详解新手使用vue-router传参时注意事项
2019/06/06 Javascript
如何基于js判断浏览器版本
2020/02/20 Javascript
利用python获取Ping结果示例代码
2017/07/06 Python
快速解决安装python没有scripts文件夹的问题
2018/04/03 Python
python实现在一个画布上画多个子图
2020/01/19 Python
python图片验证码识别最新模块muggle_ocr的示例代码
2020/07/03 Python
详解Python 函数参数的拆解
2020/09/02 Python
AHAVA美国官方网站:死海海泥护肤品牌
2016/10/18 全球购物
俄罗斯苹果优质经销商商店:iPort
2020/05/27 全球购物
教师年终个人自我评价
2013/10/04 职场文书
中层干部岗位职责
2013/12/18 职场文书
高中毕业自我鉴定
2013/12/22 职场文书
如何打造一封优秀的留学推荐信
2014/01/25 职场文书
新教师培训心得体会
2014/09/02 职场文书
2014年初中班主任工作总结
2014/11/08 职场文书
社区党务工作总结2015
2015/05/19 职场文书
家长会开场白和结束语
2015/05/29 职场文书
800字作文之大雪
2019/12/04 职场文书
python基础之类方法和静态方法
2021/10/24 Python
MySQL中B树索引和B+树索引的区别详解
2022/03/03 MySQL