| 編程（Programming）是編定程序的中文簡稱，就是讓計算機代碼解決某個問題，對某個計算體系規定一定的運算方式，使計算體系按照該計算方式運行，并最終得到相應結果的過程。為了使計算機能夠理解（understand）人的意圖，人類就必須將需解決的問題的思路、方法和手段通過計算機能夠理解的形式告訴計算機，使得計算機能夠根據人的指令一步一步去工作，完成某種特定的任務。這種人和計算體系之間交流的過程就是編程。 【實例名稱】 用CSS+JS制作進度條(一) 【實例描述】 本節的實例演示一個用JaVascript控制的進度條，其中使用JaVascript的一些標準語法，并引用Css來設計進度條的樣式。 【實例代碼】 <html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標題頁-本站（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">
//設置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">
</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>
【運行效果】  【難點剖析】 進度條的設置需要兩段代碼實現，一段是進度條的更新，另一段是進度條的清空。進度條更新需要定時器"setTimeout”，其可以設置每隔一段時間執行固定的JavaScript方法。清空進度條比較簡單，只需要將進度條所在的div的“visibility”屬性設置為“hidden”即可。 【源碼下載】 為了JS代碼的準確性，請點擊：用CSS+JS制作進度條(一) 進行本實例源碼下載
使用編程語言寫的程序，由于每條指令都對應計算機一個特定的基本動作，所以程序占用內存少、執行效率高。
| 
