快捷導(dǎo)航

js實(shí)現(xiàn)定時(shí)進(jìn)度條完成后切換圖片

更新時(shí)間：2017年01月04日 14:28:57 作者：東成熙就

這篇文章主要介紹了js實(shí)現(xiàn)定時(shí)進(jìn)度條,進(jìn)度100%以后可以切換圖片，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

定時(shí)進(jìn)度條，進(jìn)度100%以后可以切換圖片等。

setInterval() 和setTimeout() 兩個(gè)方法都可以實(shí)現(xiàn)。

源碼：

<!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()實(shí)現(xiàn) 
***************/ 
  var p = 0; 
  var iid; 
  var runtime = 6000/100; //默認(rèn)6秒 
  function goCount(){    
    p++; 
    $("h3").html(p+'%'); 
    $(".progress-bar").css("width",p+"%"); 
    if (p == 100) 
    { 
      clearInterval(iid); 
      alert('進(jìn)度條滿了,切換下一項(xiàng)... do something'); 
    } 
  } 
  iid = setInterval(goCount,runtime); 
 
 
/******* 
方法二，setTimout()實(shí)現(xiàn) 
************* 
  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('進(jìn)度條滿了,切換下一項(xiàng)...'); 
    } 
  } 
  setTimeout(goCount,runtime); 
***************/ 
</script> 
</body> 
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JS實(shí)現(xiàn)頁(yè)面導(dǎo)航與內(nèi)容相互錨定實(shí)例詳解
這篇文章主要為大家介紹了JS實(shí)現(xiàn)頁(yè)面導(dǎo)航與內(nèi)容相互錨定實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-10-10
使用JS監(jiān)聽(tīng)鍵盤按下事件（keydown event）
這篇文章主要介紹了使用JS監(jiān)聽(tīng)鍵盤按下事件（keydown event），本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-11-11
頁(yè)面定時(shí)刷新(1秒刷新一次)
頁(yè)面定時(shí)刷新的示例想必大家也見(jiàn)到不少，在本文將為大家介紹的是，如何實(shí)現(xiàn)1秒刷新一次，感興趣的朋友可以了解下本文
2013-11-11
Bootstrap一款超好用的前端框架
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，用于開發(fā)響應(yīng)式布局、移動(dòng)設(shè)備優(yōu)先的 WEB 項(xiàng)目。接下來(lái)通過(guò)本文給大家分享Bootstrap一款超好用的前端框架，感興趣的朋友一起看看吧
2017-09-09
使用Bootstrap美化按鈕實(shí)例代碼(demo)
這篇文章主要介紹了使用Bootstrap美化按鈕實(shí)例代碼(demo),非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2017-02-02
JavaScript實(shí)現(xiàn)簡(jiǎn)易的天數(shù)計(jì)算器實(shí)例【附demo源碼下載】
這篇文章主要介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)易的天數(shù)計(jì)算器,結(jié)合實(shí)例形式分析了javascript日期與時(shí)間計(jì)算的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2017-01-01
基于JavaScript實(shí)現(xiàn)在新的tab頁(yè)打開url
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)在新的tab頁(yè)打開url 的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-08-08
代碼詳解javascript模塊加載器
本篇文章通過(guò)代碼示例給大家詳細(xì)分析了javascript基礎(chǔ)內(nèi)容模塊加載器的相關(guān)知識(shí)點(diǎn)，一起學(xué)習(xí)下。
2018-03-03
js實(shí)現(xiàn)拖拽效果
本文主要是為了讓大家更好的理解js的面向?qū)ο?，通過(guò)實(shí)現(xiàn)拖拽效果向大家展示js面向?qū)ο?，非常不錯(cuò)，這里推薦給大家。
2015-02-02
ES6新特性之類(Class)和繼承(Extends)相關(guān)概念與用法分析
這篇文章主要介紹了ES6新特性之類(Class)和繼承(Extends)相關(guān)概念與用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了ES6中類(Class)和繼承(Extends)的基本概念、語(yǔ)法、使用方法與注意事項(xiàng),需要的朋友可以參考下
2017-05-05