| 編程（Programming）是編定程序的中文簡稱，就是讓計算機(jī)代碼解決某個問題，對某個計算體系規(guī)定一定的運(yùn)算方式，使計算體系按照該計算方式運(yùn)行，并最終得到相應(yīng)結(jié)果的過程。為了使計算機(jī)能夠理解（understand）人的意圖，人類就必須將需解決的問題的思路、方法和手段通過計算機(jī)能夠理解的形式告訴計算機(jī)，使得計算機(jī)能夠根據(jù)人的指令一步一步去工作，完成某種特定的任務(wù)。這種人和計算體系之間交流的過程就是編程。 【實(shí)例名稱】 用CSS+JS制作進(jìn)度條(一) 【實(shí)例描述】 本節(jié)的實(shí)例演示一個用JaVascript控制的進(jìn)度條，其中使用JaVascript的一些標(biāo)準(zhǔn)語法，并引用Css來設(shè)計進(jìn)度條的樣式。 【實(shí)例代碼】 <html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標(biāo)題頁-本站（www.xue51.com）</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">
//設(shè)置span元素的編號
var progressEnd = 16;
//設(shè)置進(jìn)度條的顏色為藍(lán)色
var progressColor = "blue";
//設(shè)置進(jìn)度條的走動時間--毫秒為單位
var progressInterval = 350;
//進(jìn)度條的開始標(biāo)志
var progressBegin = 0;
var progressTimer;
function progress_clear()
{
//清空定時器
clearTimeout(progressTimer);
//隱藏div
document.getElementById("framediv").style.visibility="hidden";
}
function progress_update()
{
progressBegin++;
//如果開始標(biāo)志已經(jīng)大于結(jié)束標(biāo)志
if (progressBegin > progressEnd)
progress_clear();//清空進(jìn)度條
else
//否則繼續(xù)更新進(jìn)度條
document.getElementById("progress"+progressBegin).
style.backgroundColor = progressColor;
//在一定的時間間隔內(nèi)循環(huán)更新進(jìn)度條
progressTimer = setTimeout("progress_update()",progressInterval);
}
function linkto()
{
//顯示div
document.getElementById("framediv").style.visibility="visible";
//調(diào)用更新進(jìn)度條的方法
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>正在連接站點(diǎn)，請稍候...</p>
<table align="center">
<tr> <td>
<div class="divprogress"><span id="progress1">
</span>
<span id="progress2"> </span>
<span id="progress3"> </span>
<span id="progress4"> </span>
<span id="progress5"> </span>
<span id="progress6"> </span>
<span id="progress7"> </span>
<span id="progress8"> </span>
<span id="progress9"> </span>
<span id="progress10"> </span>
<span id="progress11"> </span>
<span id="progress12"> </span>
<span id="progress13"> </span>
<span id="progress14"> </span>
<span id="progress15"> </span>
<span id="progress16"> </span>
</div>
</td> </tr>
</table>
</div>
</form> </body>
</html>
【運(yùn)行效果】  【難點(diǎn)剖析】 進(jìn)度條的設(shè)置需要兩段代碼實(shí)現(xiàn)，一段是進(jìn)度條的更新，另一段是進(jìn)度條的清空。進(jìn)度條更新需要定時器"setTimeout”，其可以設(shè)置每隔一段時間執(zhí)行固定的JavaScript方法。清空進(jìn)度條比較簡單，只需要將進(jìn)度條所在的div的“visibility”屬性設(shè)置為“hidden”即可。 【源碼下載】 為了JS代碼的準(zhǔn)確性，請點(diǎn)擊：用CSS+JS制作進(jìn)度條(一) 進(jìn)行本實(shí)例源碼下載
使用編程語言寫的程序，由于每條指令都對應(yīng)計算機(jī)一個特定的基本動作，所以程序占用內(nèi)存少、執(zhí)行效率高。
| 
