| 編程（Programming）是編定程序的中文簡稱，就是讓計算機代碼解決某個問題，對某個計算體系規定一定的運算方式，使計算體系按照該計算方式運行，并最終得到相應結果的過程。為了使計算機能夠理解（understand）人的意圖，人類就必須將需解決的問題的思路、方法和手段通過計算機能夠理解的形式告訴計算機，使得計算機能夠根據人的指令一步一步去工作，完成某種特定的任務。這種人和計算體系之間交流的過程就是編程。 【實例名稱】 JS設計滑動條效果(二) 【實例描述】 為了增加頁面的美觀性，可使用滑動條來顯示百分比，而且還可以拖曳滑動條改變百分比的大小。本例學習如何實現這種功能的滑動條。 【實例代碼】 <html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=gb2312">
<title>滑塊條-本站（www.xue51.com）</title>
<style type="text/css">
#trackBar
{
background-color:#666666;
}#trackBar_slider
{
border:1px solid #808080;
background-color:#FFFFFF;
}#trackBar1
{
background-color:blue;
}#trackBar1_slider
{
border:1px solid #808080;
background-color:#FFFFFF;
}
</style>
</head>
<body>
<div id="info"></div>
<div id="trackBar1"> </div>
<script type="text/javascript" language="javascript">
//對象未創建完成之前，不能在函數之中用this
function setTrackBar(trackBar, min, max, barPos)
//指定的div，最小值，最大值和位置
{
this.trackBar = trackBar; //承載滑動條的對象
this.sliderIdStr = trackBar + "_slider";
//滑動條
this.trackBarId = document.getElementById(this.trackBar);
//獲取div
this.sliderId = null; //未創建滑動條對象
this.min = (min>=0)?min:0;//最小值不能小于0
this.max = (max>=min)?max:min;//最大值必須大于最小值
this.barPos = (barPos>=min && barPos<=max)?barPos:min;
//位置必須在最大和最小之間 this.orientation = "h"; //設置對象和滑動條的位置
this.trackBarWidth = 100;
this.trackBarHeight = 10
this.sliderWidth = 10;
this.sliderHeight = 10;
this.Create = Create;
this.draging = false;
this.offset = 0; this.BeforeDrag = BeforeDrag;//綁定滑動事件
this.OnDrag = OnDrag;
this.EndDrag = EndDrag;
}
function Create(trackBar1)//創建滑動條的方法
{
this.trackBarId.innerHTML = "<div id=\"" + this.sliderIdStr +
"\"" + " onmousedown=\"javascript:BeforeDrag(" + trackBar1 + ");
\"" + " style=\"position:relative;cursor:n-resize;\"></div>";
this.sliderId = document.getElementById(this.sliderIdStr);
this.sliderId.style.pixelTop = this.trackBarHeight -
((this.trackBarHeight-this.sliderHeight)*this.barPos)/
(this.max-this.min) - this.sliderHeight;
this.trackBarId.style.width = this.trackBarWidth;
//設置滑動條的初始位置
this.trackBarId.style.height = this.trackBarHeight;
this.sliderId.style.width = this.sliderWidth;
this.sliderId.style.height = this.sliderHeight; return true;
}var curTrackBar = null;//準備拖拽
function BeforeDrag(trackBar)
{
if (event.button != 1)
//如果不是鼠標左鍵，則返回
{
return;
}
document.body.style.cursor = "n-resize";
//鼠標的樣式
curTrackBar = trackBar;
curTrackBar.draging = true;
curTrackBar.offset = curTrackBar.trackBarId.style.pixelTop + curTrackBar.sliderId.style.pixelTop+curTrackBar.sliderId.offsetHeight- event.clientY;
}
function OnDrag()
//實現拖拽的方法
{
if(!curTrackBar || !curTrackBar.draging)
{
return;
}
event.returnValue = false;
var phyPos = 0;
if (curTrackBar.orientation !== "h")
{
phyPos = curTrackBar.trackBarId.style.pixelTop +
curTrackBar.trackBarId.offsetHeight - event.clientY - curTrackBar.offset;
if (phyPos <= 0)
{
phyPos = 0; //如果拖動到最底端
}
else if(phyPos >= (curTrackBar.trackBarId.offsetHeight-
curTrackBar.sliderId.offsetHeight))
{
phyPos = curTrackBar.trackBarId.offsetHeight -
curTrackBar.sliderId.offsetHeight;
}
//改變滑動條的位置
curTrackBar.sliderId.style.pixelTop =
curTrackBar.trackBarId.offsetHeight -
phyPos - curTrackBar.sliderId.offsetHeight;
curTrackBar.barPos = parseInt(((curTrackBar.max-curTrackBar.min)*
phyPos/(curTrackBar.trackBarId.offsetHeight-curTrackBar.sliderId.offsetHeight)));
}OnTrackBarTxt();
}
function EndDrag()//結束拖拽
{
if (!curTrackBar)
{
return;
}
document.body.style.cursor = "default";
curTrackBar.draging = false;
}function OnTrackBarTxt() //拖拽時，改變滑動條的值
{
document.getElementById("info").innerHTML =
curTrackBar.barPos+ " / " + curTrackBar.max;
}document.onmousemove = OnDrag;
//鼠標移動時，實現拖拽-開始滑動
document.onmouseup = EndDrag;
//鼠標離開時，結束拖拽-即結束滑動
var trackBarObj1 = new setTrackBar("trackBar1", 0, 100,100);
//配置滑動條，指定最小值和最大值
trackBarObj1.orientation = "v";//滑動條的方法-垂直
trackBarObj1.trackBarWidth = 15;//對象的寬度
trackBarObj1.trackBarHeight = 100;//對象的高度
trackBarObj1.sliderWidth = 15;//滑動條的寬度
trackBarObj1.sliderHeight = 10; //滑動條的高度
trackBarObj1.Create("trackBarObj1");//創建滑動條
</script>
</body>
</html>
【運行效果】  【難點剖析】 本例提供了關于滑動條的5個常用方法。“setTrackBar”方法用來設置滾動條的最小值、最大值和位置等。“Create”方法用來創建滑動條的承載器和滑動條本身。“BeforeDrag”方法主要判斷用戶的操作是否為“拖曳”。“OnDrag”方法表示拖曳過程中滑動條的改變。“EndDrag'’方法用來實現拖曳完成后的一些狀態恢復。這些方法可以直接移植到其他項目中使用。 【源碼下載】 為了JS代碼的準確性，請點擊：JS設計滑動條效果(二) 進行本實例源碼下載
使用編程語言寫的程序，由于每條指令都對應計算機一個特定的基本動作，所以程序占用內存少、執行效率高。
| 
