當前位置：軟件學堂 > 資訊首頁 > 網絡編程 > 編程其他 > 用CSS+JS制作進度條(一)

用CSS+JS制作進度條(一)

2012/11/9 15:55:56作者：佚名來源：網絡

移動端

【實例名稱】

用CSS+JS制作進度條(一)

【實例描述】

本節的實例演示一個用JaVascript控制的進度條，其中使用JaVascript的一些標準語法，并引用Css來設計進度條的樣式。

【實例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標題頁-學無憂（www.yzddtk.cn）</title>
<style>
.divbody
{
 z-index: 2;
 left: 2%;
 visibility: hidden;
 width: 98%;
 cursor: crosshair;
 position: absolute;
 top: 40px;
 height: 96%;
 background-color: #ffffcc;
}
p
{
 color: #cc6633;
 font-weight: bold;
}
.divprogress
{
 BORDER-RIGHT: black 1px solid; 
 PADDING-RIGHT: 3px; 
 BORDER-TOP: black 1px solid; 
 PADDING-LEFT: 3px; 
 FONT-SIZE: 10pt; 
 PADDING-BOTTOM: 2px; 
 BORDER-LEFT: black 1px solid; 
 PADDING-TOP: 2px; 
 BORDER-BOTTOM: black 1px solid
}
</style>
    <script type="text/javascript">
        //設置span元素的編號
        var progressEnd = 16; 
        //設置進度條的顏色為藍色
        var progressColor = "blue";
        //設置進度條的走動時間--毫秒為單位
        var progressInterval = 350;
        //進度條的開始標志
        var progressBegin = 0;
        var progressTimer;
        function progress_clear() 
        {
           //清空定時器
            clearTimeout(progressTimer);
           //隱藏div
document.getElementById("framediv").style.visibility="hidden";
        }
        function progress_update() 
        {
            progressBegin++;
            //如果開始標志已經大于結束標志
            if (progressBegin > progressEnd)
             progress_clear();//清空進度條
            else 
            //否則繼續更新進度條
             document.getElementById("progress"+progressBegin).
style.backgroundColor = progressColor;
            //在一定的時間間隔內循環更新進度條
progressTimer = setTimeout("progress_update()",progressInterval);
        }
        function linkto()
        {
          //顯示div
document.getElementById("framediv").style.visibility="visible";
          //調用更新進度條的方法
          progress_update();
        }
    </script>
</head>
<body>
<form id="form1" runat="server">
    <input id="btn1" type="button" 
onclick="linkto()" value="連接" />
    <div id="framediv" class="divbody" >
        <br />
        <p>正在連接站點，請稍候...</p>
        <table align="center">
            <tr>        <td>
            <div class="divprogress"><span id="progress1">
&nbsp;&nbsp;</span>
            <span id="progress2">&nbsp;&nbsp;</span> 
<span id="progress3">&nbsp;&nbsp;</span> 
            <span id="progress4">&nbsp;&nbsp;</span> 
<span id="progress5">&nbsp;&nbsp;</span>
            <span id="progress6">&nbsp;&nbsp;</span> 
<span id="progress7">&nbsp;&nbsp;</span>
            <span id="progress8">&nbsp;&nbsp;</span> 
<span id="progress9">&nbsp;&nbsp;</span>
            <span id="progress10">&nbsp;&nbsp;</span> 
<span id="progress11">&nbsp;&nbsp;</span>
            <span id="progress12">&nbsp;&nbsp;</span> 
<span id="progress13">&nbsp;&nbsp;</span>
            <span id="progress14">&nbsp;&nbsp;</span>
<span id="progress15">&nbsp;&nbsp;</span>
            <span id="progress16">&nbsp;&nbsp;</span>
            </div>
            </td>        </tr>
        </table>
    </div>
  </form>
</body>
</html>

【運行效果】

用cSS+JS制作進度條(一)運行效果

【難點剖析】

進度條的設置需要兩段代碼實現，一段是進度條的更新，另一段是進度條的清空。進度條更新需要定時器"setTimeout”，其可以設置每隔一段時間執行固定的JavaScript方法。清空進度條比較簡單，只需要將進度條所在的div的“visibility”屬性設置為“hidden”即可。

【源碼下載】

為了JS代碼的準確性，請點擊：用CSS+JS制作進度條(一) 進行本實例源碼下載

標簽：進度條

上一篇：JS實現用table制作進度條
下一篇：用CSS+JS制作進度條(二)

相關文章

熱門軟件/ 推薦游戲/ 手機軟件

資訊分類

Dreamweaver Flash DIV+CSS 編程其他

推薦教程

精品軟件推薦

360安全衛士

訊飛輸入法

欧美一级一极性活片免费观看,欧美一级艳片欧美精品,欧美一级性爱大片,欧美一级囗交视频视频,欧美一级特黄录像视频