溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了javascript基于定時器實現進度條功能。分享給大家供大家參考，具體如下：
Javascript 中的定時器
window度一線下面的方法 window.setInterval() 啟動定時器
1.setInterval(function(函數),time(每隔多少時間執行一次函數，單位是毫秒))
會重復執行某項操作
2.setTimeout 運用在延遲一段時間，再進行某項操作
setTimeout(function,time) ,setTimeout 不會重復！
停止定時器
setTimeoout 對應的是clearTimeout(對象) 清除已設置的setTiemout對象
setInterval 對應的是clearInterval(對象) 清除已經設置的setInterval對象
給出一個案例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.jb51.net js進度條</title>
<style type="text/css">
#outer/*外部*/
{
margin-top:100px;
border:solid black 1px;
background-color:white;
width:1004px;
height:54px;
}
#inner/*內部*/
{
background-color:red;
width:0px;/*首先將內部的寬度定為0，用show（）來實現進度條！*/
height:50px;
margin-left:2px;
margin-top:2px;
}
</style>
<script language="javascript">
function show()
{
if(document.getElementById("inner").offsetWidth<1000)//offsetWidth實現的時候width是沒有寬度的，而style.width實現的時候則有寬度（px）！
{
document.getElementById("inner").style.width=
document.getElementById("inner").offsetWidth+20+"px";//每次執行show()函數的時候寬度都會加上20！
console.log(document.getElementById("inner").style.width);//console 控制臺 ：可以在網頁上看到width的變化(利用F12)
}
else
{
document.getElementById("inner").style.width=1000+"px";//如果大于1000px的話，只能將1000px賦值給border-width;!
stop();//此時就應該執行停止定時器的函數！
}
}
var timer;//定義在兩個函數外面，因為兩個函數都會用到！
function start()
{
timeer = window.setInterval(show,200);//每隔200ms調用一次show函數
}
function stop()
{
timer = window.clearInterval(timer);
}
</script>
</head>
<body onload="start()">
<div id="outer">
<div id="inner">
</div>
</div>
</body>
</html>
運行效果：
運行程序的時候，網頁上的進度條就會加載，加載的快慢與時間有關！
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript時間與日期操作技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
