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>
</div>
</BODY>
</HTML>
