js實(shí)現(xiàn)進(jìn)度條的方法
更新時(shí)間：2015年02月13日 10:35:21 作者：尹若軒
這篇文章主要介紹了js實(shí)現(xiàn)進(jìn)度條的方法,實(shí)例分析了兩種不同的實(shí)現(xiàn)方法,并說明了setTimeout和setInterval的使用區(qū)別,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了js實(shí)現(xiàn)進(jìn)度條的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：
1.setTimeout和clearTimeout
<html>
<head>
<title>進(jìn)度條</title>
<style type="text/css">
.container{
width:450px;
border:1px solid #6C9C2C;
height:25px;
}
#bar{
background:#95CA0D;
float:left;
height:100%;
text-align:center;
line-height:150%;
}
</style>
<script type="text/javascript">
function run(){
var bar = document.getElementById("bar");
var total = document.getElementById("total");
bar.style.width=parseInt(bar.style.width) + 1 + "%";
total.innerHTML = bar.style.width;
if(bar.style.width == "100%"){
window.clearTimeout(timeout);
return;
}
var timeout=window.setTimeout("run()",100);
}
window.onload = function(){
run();
}
</script>
</head>
<body>
<div class="container">
<div id="bar" style="width:0%;"></div>
</div>
<span id="total"></span>
</body>
</html>
效果圖：
2.setInterval和clearInterval
<html>
<head>
<title>進(jìn)度條</title>
<style type="text/css">
.processcontainer{
width:450px;
border:1px solid #6C9C2C;
height:25px;
}
#processbar{
background:#95CA0D;
float:left;
height:100%;
text-align:center;
line-height:150%;
}
</style>
<script type="text/javascript">
function setProcess(){
var processbar = document.getElementById("processbar");
processbar.style.width = parseInt(processbar.style.width) + 1 + "%";
processbar.innerHTML = processbar.style.width;
if(processbar.style.width == "100%"){
window.clearInterval(bartimer);
}
}
var bartimer = window.setInterval(function(){setProcess();},100);
window.onload = function(){
bartimer;
}
</script>
</head>
<body>
<div class="processcontainer">
<div id="processbar" style="width:0%;"></div>
</div>
</body>
</html>
效果圖：
3.setTimeout和setInterval區(qū)別
setTimeout() 只執(zhí)行 code 一次。如果要多次調(diào)用，請(qǐng)使用 setInterval() ，setInterval() 方法會(huì)不停地調(diào)用函數(shù)，直到 clearInterval() 被調(diào)用或窗口被關(guān)閉，或者讓 code 自身再次調(diào)用 setTimeout()。
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- JavaScript?canvas繪制動(dòng)態(tài)圓環(huán)進(jìn)度條
- JavaScript canvas繪制圓形加載進(jìn)度條
- 詳解JavaScript+Canvas繪制環(huán)形進(jìn)度條
- JavaScript實(shí)現(xiàn)可動(dòng)的canvas環(huán)形進(jìn)度條
- js+HTML5 canvas 實(shí)現(xiàn)簡(jiǎn)單的加載條(進(jìn)度條)功能示例
- 環(huán)形加載進(jìn)度條封裝（Vue插件版和原生js版）
- js實(shí)現(xiàn)增加數(shù)字顯示的環(huán)形進(jìn)度條效果
- JS實(shí)現(xiàn)環(huán)形進(jìn)度條（從0到100%）效果
- javascript 進(jìn)度條的幾種方法
- JavaScript canvas實(shí)現(xiàn)環(huán)形漸變進(jìn)度條
相關(guān)文章
fastclick插件導(dǎo)致日期(input[type="date"])控件無(wú)法被觸發(fā)該如何解決
這篇文章主要介紹了fastclick插件導(dǎo)致日期(input[type="date"])控件無(wú)法被觸發(fā)該如何解決,需要的朋友可以參考下2015-11-11
限時(shí)搶購(gòu)-倒計(jì)時(shí)的完整實(shí)例(分享)
下面小編就為大家?guī)?lái)一篇限時(shí)搶購(gòu)-倒計(jì)時(shí)的完整實(shí)例(分享)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-09-09
JavaScript獲取URL中參數(shù)querystring的方法詳解
這篇文章先給大家介紹了JavaScript獲取URL中參數(shù)querystring的方法，而后有詳解介紹了Location對(duì)象的屬性和，Location對(duì)象的方法，對(duì)大家的理解很有幫助，有需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。2016-10-10
一般如果變量通過var聲明，但是并未初始化的時(shí)候，變量的值為undefined，而未定義的變量則需要通過 "typeof 變量"的形式來(lái)判斷，否則會(huì)發(fā)生錯(cuò)誤2012-11-11
在本篇文章里小編給大家整理了一篇關(guān)于js對(duì)象的讀取速度實(shí)例詳解內(nèi)容，有需要的朋友們可以跟著學(xué)習(xí)下。2021-11-11
深入webpack打包原理及l(fā)oader和plugin的實(shí)現(xiàn)
這篇文章主要介紹了深入webpack打包原理及l(fā)oader和plugin的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
在Node.js中使用Javascript Generators詳解
下面小編就為大家?guī)?lái)一篇在Node.js中使用Javascript Generators詳解。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考2016-05-05
這篇文章主要介紹了一篇文章讓你搞懂JavaScript 原型和原型鏈，幫助大家更好的理解和學(xué)習(xí)JavaScript，感興趣的朋友可以了解下2020-11-11
UNIAPP實(shí)現(xiàn)微信小程序登錄授權(quán)和手機(jī)號(hào)授權(quán)功能(uniapp做微信小程序)
uniapp開發(fā)小程序,先授權(quán)用戶信息后再出現(xiàn)手機(jī)號(hào)授權(quán)的頁(yè)面進(jìn)行手機(jī)號(hào)授權(quán),完成后返回上一頁(yè)面并把信息存入后臺(tái)以及前臺(tái)緩存中,方便使用,這篇文章主要介紹了UNIAPP實(shí)現(xiàn)微信小程序登錄授權(quán)和手機(jī)號(hào)授權(quán)（uniapp做微信小程序）,需要的朋友可以參考下
2024-08-08