js實現定時進度條完成后切換圖片
更新時間：2017年01月04日 14:28:57 作者：東成熙就
這篇文章主要介紹了js實現定時進度條,進度100%以后可以切換圖片，具有一定的參考價值，感興趣的小伙伴們可以參考一下
定時進度條，進度100%以后可以切換圖片等。
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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了Bootstrap布局之柵格系統，小編對Bootstrap柵格系統（布局）也很陌生，特分享整理這篇文章，感興趣的小伙伴們可以參考一下2016-06-06
這篇文章主要介紹了使用uniapp實現發(fā)布朋友圈功能,在文章底部給大家介紹了uniapp?微信小程序分享、分享朋友圈功能，通過頁內自定義分享按鈕，結合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-09-09
這篇文章主要給大家介紹了關于JS監(jiān)聽元素dom變化的相關資料,監(jiān)聽DOM大小的變化,在前端開發(fā)中,算是一個比較常見的需求,比如我們要制作可伸縮的圖表的時候,可能需要根據DOM大小的變化,進行動態(tài)的更新圖表,需要的朋友可以參考下2023-09-09
在寫原生的Javascript的時候，因為IE的JS引擎與標準瀏覽器的JS引擎之間總有那么些差異，所以經常會去判斷是否是IE瀏覽器2014-04-04
這篇文章主要介紹了微信小程序實現多選刪除列表數據功能,涉及微信小程序列表數據讀取、顯示、刪除等相關操作技巧,需要的朋友可以參考下2019-01-01
TypeScript?使用?Tuple?Union?聲明函數重載
這篇文章主要介紹了TypeScript?使用?Tuple?Union?聲明函數重載，TypeScript 中為函數添加多個簽名后，依然需要添加相應的代碼來判斷并從不同的簽名參數列表中獲取對應的參數，下文就來探索方法和技巧吧2022-04-04
這篇文章主要為大家詳細介紹了小程序animate動畫實現直播間點贊，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
JavaScript for in錨點的動態(tài)創(chuàng)建
主要包括for..in的使用,錨點的動態(tài)創(chuàng)建,狀態(tài)欄文字效果2008-09-09
本文主要介紹了jquery源碼中常見的知識點以及javascript中原型鏈常見的知識點，非常的全面，這里推薦給小伙伴們。2015-03-03
本篇文章主要介紹了微信小程序之ES6與事項助手的功能實現，具有一定的參考價值，有興趣的同學可以了解一下。2016-11-11