快捷導(dǎo)航

用CSS+JS實現(xiàn)的進度條效果效果

更新時間：2007年06月05日 00:00:00 作者：

進度條,就是在用戶進入你的網(wǎng)站的時候,能讓用戶看到網(wǎng)頁下載了多少,這個的作用非常明顯---就是讓用戶的等待時間變長,可以有效的彌補空間慢的缺點(當然,你空間太慢,還是建議你換下空間,呵呵)
好了,現(xiàn)在我先來舉兩個例子
一個是用FLASH實現(xiàn)的 (這個網(wǎng)上很多網(wǎng)站都是,不說了)
一個是用動態(tài)的GIF實現(xiàn)的 (這個你可以看微軟官方的下載頁面,也不說了)
這里,我們的重點是用 CSS+JS 實現(xiàn)這個效果
好了,廢話不多說,我們開始
首先,寫一段HTML代碼
<div id="loading">
<strong id="loadcss"> 33%</strong>
</div>
好了,現(xiàn)在我們編寫一下CSS代碼
#loading {

                    width: 300px;

                    background-color: #000;

                      border : 2px solid #000;

                }

這個是我們希望進度條的底色是 #000 ,黑色的,再加了一個邊框

j
接下來多 loadcss 進行設(shè)計

#loadcss {

                  display : block ; /*很重要, 弄成塊*/

                  background-color: # 0df;

                  text-align : center;

                }

注意,這里的BLOCK 很重要的, 我們用 #0df 這種顏色來作為進度條的顏色;

好了,預(yù)覽一下

h
呵呵,不過現(xiàn)在是整條進度條都是滿的

那么,怎么弄可以顯示進度呢?

這里,可以用一個巧妙的方法

把HTML代碼稍微修改一下

看下面的代碼:

<div id="loading">

        <strong id="loadcss" style="width:33%;"> 33%</strong>

</div>

呵呵,怎么樣,現(xiàn)在顯示的就是33% 了

但是,他是不動,對吧? 好,下面我們就用 JS 來實現(xiàn) 一下 (這個JS不是我設(shè)計的...)

<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主要是兩個函數(shù), 一個是 load ,用來開啟進度條,

                                          第二是 setload ,用來控制進度條的位置 ,在 setload設(shè)置一個計數(shù)器,每0.5秒運行一次steload.

O K了,這段JS要放在HEAD里面,然后在BODY中調(diào)用 , 即 <BODY ONLOAD="LOAD;">

呵呵,現(xiàn)在運行一下網(wǎng)頁試試,呵呵,是不是成功了,呵呵.

您可能感興趣的文章: