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;">
呵呵,現在運行一下網頁試試,呵呵,是不是成功了,呵呵.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
