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 相关文章推荐
js onpropertychange输入框 事件获取属性
Mar 26 Javascript
js切换div css注意的细节
Dec 10 Javascript
jQuery对象和Javascript对象之间转换的实例代码
Mar 20 Javascript
jquery根据name属性查找的小例子
Nov 21 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
Oct 27 Javascript
jQuery中cookie插件用法实例分析
Dec 04 Javascript
jQuery文字轮播特效
Feb 12 Javascript
vue.js树形组件之删除双击增加分支实例代码
Feb 28 Javascript
slideToggle+slideup实现手机端折叠菜单效果
May 25 Javascript
JS动态添加的div点击跳转到另一页面实现代码
Sep 30 Javascript
JS手机端touch事件计算滑动距离的方法示例
Oct 26 Javascript
vue微信分享到朋友圈 vue微信发送给好友
Nov 28 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
各种咖啡的英文名子是什么
2021/03/03 新手入门
php 连接mssql数据库 初学php笔记
2010/03/01 PHP
PHP把JPEG图片转换成Progressive JPEG的方法
2014/06/30 PHP
php+mysql实现用户注册登陆的方法
2015/01/03 PHP
在win系统安装配置 Memcached for PHP 5.3 图文教程
2015/03/03 PHP
Yii的Srbac插件用法详解
2016/07/14 PHP
PHP验证码类ValidateCode解析
2017/01/07 PHP
js字母大小写转换实现方法总结
2013/11/13 Javascript
html5+javascript实现简单上传的注意细节
2016/04/18 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
2016/08/20 Javascript
微信小程序 Audio API详解及实例代码
2016/09/30 Javascript
获取url中用&amp;隔开的参数实例(分享)
2017/05/28 Javascript
vue移动端实现红包雨效果
2020/06/23 Javascript
详解如何配置vue-cli3.0的vue.config.js
2018/08/23 Javascript
如何使用VuePress搭建一个类型element ui文档
2019/02/14 Javascript
vue-cli webpack配置文件分析
2019/05/20 Javascript
vue实现整屏滚动切换
2020/06/29 Javascript
vue router-link 默认a标签去除下划线的实现
2020/11/06 Javascript
Python中使用插入排序算法的简单分析与代码示例
2016/05/04 Python
使用apidocJs快速生成在线文档的实例讲解
2018/02/07 Python
Python3中详解fabfile的编写
2018/06/24 Python
修改默认的pip版本为对应python2.7的方法
2018/11/06 Python
对python文件读写的缓冲行为详解
2019/02/13 Python
实例详解Python模块decimal
2019/06/26 Python
在jupyter notebook中调用.ipynb文件方式
2020/04/14 Python
Python使用sqlite3模块内置数据库
2020/05/07 Python
python如何导出微信公众号文章方法详解
2020/08/31 Python
python爬取youtube视频的示例代码
2021/03/03 Python
深入理解css属性的选择对动画性能的影响
2016/04/20 HTML / CSS
微信端html5页面调用分享接口示例
2018/03/14 HTML / CSS
利达恒信公司.NET笔试题面试题
2016/03/05 面试题
市场总监岗位职责
2015/02/11 职场文书
幼儿园安全工作总结2015
2015/04/20 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书
Python中的np.argmin()和np.argmax()函数用法
2021/06/02 Python
Springboot中如何自动转JSON输出
2022/06/16 Java/Android