JavaScript 實作的滾動條，熟悉一下JS的基本文法一些細節建議檢視手冊：
《Html - Css - Javascript - The Web Programmer's Desk Reference》（後續上傳 ）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!--
var taskId = window.setInterval("increase()", 1000/frequency); 方法用于按照指定的時間間隔
循環運作一個方法，第一個參數為要調用的方法，第二個參數為間隔時間（以毫秒為機關），
例如：setInterval("f()", 500) 将每隔500毫秒調用一次f()方法
setInterval方法的傳回值為一個整數，clearInterval方法使用該整數取消這個循環過程，例如：
如果使用 var id = setInterval("f()", 500)建立一個循環運作的任務;
則使用clearInterval(id)将取消該任務
bar.style.clip = "rect(0 " + right + " auto 0)";
樣式屬性clip用于指定該元素的所占區域
樣式: "rect(top right bottom left)"表示指定了上下左右的一個矩形區域
-->
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
<!--
#bar, #barArea {
position: absolute;
left: 0;
top: 0;
background-color: blue;
}
#barBg {
background-color: black;
-->
</style>
<script type="text/javascript">
var frequency = 50; // 表示進度條每秒滾動的次數, 可以用于控制進度條滾動的平滑程度
var duration = 5; // 表示進度條走完需要的總秒數, 可以用于控制進度條滾動的速度
var right = 0; // 滾動條的右邊界
var width = 0;
var taskId;
function tstBar(){
width = bar.style.pixelWidth;
// 排程每秒運作一次increase()方法
taskId = window.setInterval("increase()", 1000/frequency);
}
function increase(){
bar.style.clip = "rect(0 " + right + " auto 0)";
if (right < width) {
// 控制進度條的右邊界不斷增大, 展現滾動的效果
right = right + (width / (duration * frequency));
} else {
// 滾動到達邊界後(200px), 結束排程
window.clearInterval(taskId);
right = 0;
}
</script>
</HEAD>
<BODY>
<p>
<input type="button" value="TestBar"/>
</p>
<div id="barArea" style="position:relative;width:200px;height:20px">
<div id="barBg" style="width:200px;height:20px;z-index:9">
</div>
<div id="bar" style="width:200px;height:20px;z-index:10">
</div>
</BODY>
</HTML>
本文轉自 wws5201985 51CTO部落格，原文連結：http://blog.51cto.com/wws5201985/814832，如需轉載請自行聯系原作者
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)