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 相关文章推荐
用javascript编写的第一人称射击游戏
Feb 25 Javascript
javascript操作cookie的文章(设置,删除cookies)
Apr 01 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
Aug 06 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
Nov 23 Javascript
JS构造函数与原型prototype的区别介绍
Jul 04 Javascript
关于Vue.js一些问题和思考学习笔记(1)
Dec 02 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
Feb 16 Javascript
vue分类筛选filter方法简单实例
Mar 30 Javascript
在vue项目中引入高德地图及其UI组件的方法
Sep 04 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
Dec 14 Javascript
vue+egg+jwt实现登录验证的示例代码
May 18 Javascript
JavaScript键盘事件响应顺序详解
Sep 30 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
关于laravel 数据库迁移中integer类型是无法指定长度的问题
2019/10/09 PHP
深入理解JavaScript系列(2) 揭秘命名函数表达式
2012/01/15 Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
2012/04/26 Javascript
jQuery 获取URL的GET参数值的小例子
2013/04/18 Javascript
模拟电子签章盖章效果的jQuery插件源码
2013/06/24 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
2013/11/30 Javascript
详解js闭包
2014/09/02 Javascript
45个JavaScript编程注意事项、技巧大全
2015/02/11 Javascript
JS实现的不规则TAB选项卡效果代码
2015/09/18 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
2016/08/02 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
2017/09/03 Javascript
vux uploader 图片上传组件的安装使用方法
2018/05/15 Javascript
axios简单实现小程序延时loading指示
2018/07/30 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
2018/08/12 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
2020/09/08 Javascript
[01:09:01]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第一场 10.28
2020/10/28 DOTA
python从入门到精通(DAY 1)
2015/12/20 Python
python使用mysql数据库示例代码
2017/05/21 Python
回调函数的意义以及python实现实例
2017/06/20 Python
解析Python中的eval()、exec()及其相关函数
2017/12/20 Python
为什么入门大数据选择Python而不是Java?
2018/03/07 Python
Python datetime和unix时间戳之间相互转换的讲解
2019/04/01 Python
python实现树的深度优先遍历与广度优先遍历详解
2019/10/26 Python
pytorch标签转onehot形式实例
2020/01/02 Python
C# .NET面试题
2015/11/28 面试题
Linux面试经常问的文件系统操作命令
2016/10/04 面试题
军训考核自我鉴定
2014/02/13 职场文书
岗位职责怎么写
2014/03/14 职场文书
小区物业门卫岗位职责
2014/04/10 职场文书
婚前协议书范本
2014/04/15 职场文书
目标责任书格式
2014/07/28 职场文书
群众路线学习笔记范文
2014/11/06 职场文书
2015年大学教师工作总结
2015/05/20 职场文书
全陪导游词开场白
2015/05/29 职场文书
Win10 heic文件怎么打开 ? Win10 heic文件打开教程
2022/04/06 数码科技
Go gRPC进阶教程gRPC转换HTTP
2022/06/16 Golang