進度條,就是在用戶進入你的網站的時候,能讓用戶看到網頁下載了多少,這個的作用非常明顯---就是讓用戶的等待時間變長,可以有效的彌補空間慢的缺點(當然,你空間太慢,還是建議你換下空間,呵呵)
好了,現在我先來舉兩個例子
一個是用FLASH實現的 (這個網上很多網站都是,不說了)
一個是用動態的GIF實現的 (這個你可以看微軟官方的下載頁面,也不說了)
這里,我們的重點是用 CSS+JS 實現這個效果
好了,廢話不多說,我們開始
首先,寫一段HTML代碼
<div id="loading">
<strong id="loadcss"> 33%</strong>
</div>
好了,現在我們編寫一下CSS代碼
#loading {
width: 300px;
background-color: #000;
border : 2px solid #000;
}
這個是我們希望進度條的底色是 #000 ,黑色的,再加了一個邊框
j
接下來多 loadcss 進行設計
#loadcss {
display : block ; /*很重要, 弄成塊*/
background-color: # 0df;
text-align : center;
}
注意,這里的BLOCK 很重要的, 我們用 #0df 這種顏色來作為進度條的顏色;
好了,預覽一下
h
呵呵,不過現在是整條進度條都是滿的
那么,怎么弄可以顯示進度呢?
這里,可以用一個巧妙的方法
把HTML代碼稍微修改一下
看下面的代碼:
<div id="loading">
<strong id="loadcss" style="width:33%;"> 33%</strong>
</div>
呵呵,怎么樣,現在 顯示的就是33% 了
但是,他是不動,對吧? 好,下面我們就用 JS 來實現 一下 (這個JS不是我設計的...)
<script language="JavaScript">
i=0;
function load () {
showload=setInterval("load()",500);
}
function setload(){
i+=5;
if (i>=100) {
clearInterval(showlaod);
}
document.getElementById("loadcss").style.width=i+"%" ;
document.getElementById("loadcss").innerHTML=i+"%";
}
</script>
OK了,這段JS主要是兩個函數, 一個是 load ,用來開啟進度條,
第二是 setload ,用來 控制進度條 的位置 ,在 setload設置一個計數器,每0.5秒運行一次steload.
O K了,這段JS要放在HEAD里面,然后在BODY中調用 , 即 <BODY ONLOAD="LOAD;">
呵呵,現在運行一下網頁試試,呵呵,是不是成功了,呵呵.
