欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2017年01月04日 14:28:57   作者：東成熙就  
這篇文章主要介紹了js實現(xiàn)定時進(jìn)度條,進(jìn)度100%以后可以切換圖片，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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


setInterval() 和setTimeout() 兩個方法都可以實現(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()實現(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)度條滿了,切換下一項... do something'); 
    } 
  } 
  iid = setInterval(goCount,runtime); 
 
 
/******* 
方法二，setTimout()實現(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)度條滿了,切換下一項...'); 
    } 
  } 
  setTimeout(goCount,runtime); 
***************/ 
</script> 
</body> 
</html>

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

相關(guān)文章

  • Bootstrap布局之柵格系統(tǒng)詳解

    Bootstrap布局之柵格系統(tǒng)詳解

    這篇文章主要為大家詳細(xì)介紹了Bootstrap布局之柵格系統(tǒng)，小編對Bootstrap柵格系統(tǒng)（布局）也很陌生，特分享整理這篇文章，感興趣的小伙伴們可以參考一下
    2016-06-06
  • 使用uniapp實現(xiàn)發(fā)布朋友圈功能

    使用uniapp實現(xiàn)發(fā)布朋友圈功能

    這篇文章主要介紹了使用uniapp實現(xiàn)發(fā)布朋友圈功能,在文章底部給大家介紹了uniapp?微信小程序分享、分享朋友圈功能，通過頁內(nèi)自定義分享按鈕，結(jié)合實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
    2022-09-09
  • JS監(jiān)聽元素dom變化方案詳解

    JS監(jiān)聽元素dom變化方案詳解

    這篇文章主要給大家介紹了關(guān)于JS監(jiān)聽元素dom變化的相關(guān)資料,監(jiān)聽DOM大小的變化,在前端開發(fā)中,算是一個比較常見的需求,比如我們要制作可伸縮的圖表的時候,可能需要根據(jù)DOM大小的變化,進(jìn)行動態(tài)的更新圖表,需要的朋友可以參考下
    2023-09-09
  • JavaScript中一個奇葩的IE瀏覽器判斷方法

    JavaScript中一個奇葩的IE瀏覽器判斷方法

    在寫原生的Javascript的時候，因為IE的JS引擎與標(biāo)準(zhǔn)瀏覽器的JS引擎之間總有那么些差異，所以經(jīng)常會去判斷是否是IE瀏覽器
    2014-04-04
  • 微信小程序?qū)崿F(xiàn)多選刪除列表數(shù)據(jù)功能示例

    微信小程序?qū)崿F(xiàn)多選刪除列表數(shù)據(jù)功能示例

    這篇文章主要介紹了微信小程序?qū)崿F(xiàn)多選刪除列表數(shù)據(jù)功能,涉及微信小程序列表數(shù)據(jù)讀取、顯示、刪除等相關(guān)操作技巧,需要的朋友可以參考下
    2019-01-01
  • TypeScript?使用?Tuple?Union?聲明函數(shù)重載

    TypeScript?使用?Tuple?Union?聲明函數(shù)重載

    這篇文章主要介紹了TypeScript?使用?Tuple?Union?聲明函數(shù)重載，TypeScript 中為函數(shù)添加多個簽名后，依然需要添加相應(yīng)的代碼來判斷并從不同的簽名參數(shù)列表中獲取對應(yīng)的參數(shù)，下文就來探索方法和技巧吧
    2022-04-04
  • 小程序animate動畫實現(xiàn)直播間點贊

    小程序animate動畫實現(xiàn)直播間點贊

    這篇文章主要為大家詳細(xì)介紹了小程序animate動畫實現(xiàn)直播間點贊，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-07-07
  • JavaScript for in錨點的動態(tài)創(chuàng)建

    JavaScript for in錨點的動態(tài)創(chuàng)建

    主要包括for..in的使用,錨點的動態(tài)創(chuàng)建,狀態(tài)欄文字效果
    2008-09-09
  • js+jquery常用知識點匯總

    js+jquery常用知識點匯總

    本文主要介紹了jquery源碼中常見的知識點以及javascript中原型鏈常見的知識點，非常的全面，這里推薦給小伙伴們。
    2015-03-03
  • 微信小程序之ES6與事項助手的功能實現(xiàn)

    微信小程序之ES6與事項助手的功能實現(xiàn)

    本篇文章主要介紹了微信小程序之ES6與事項助手的功能實現(xiàn)，具有一定的參考價值，有興趣的同學(xué)可以了解一下。
    2016-11-11

最新評論