| 編程（Programming）是編定程序的中文簡(jiǎn)稱，就是讓計(jì)算機(jī)代碼解決某個(gè)問題，對(duì)某個(gè)計(jì)算體系規(guī)定一定的運(yùn)算方式，使計(jì)算體系按照該計(jì)算方式運(yùn)行，并最終得到相應(yīng)結(jié)果的過程。為了使計(jì)算機(jī)能夠理解（understand）人的意圖，人類就必須將需解決的問題的思路、方法和手段通過計(jì)算機(jī)能夠理解的形式告訴計(jì)算機(jī)，使得計(jì)算機(jī)能夠根據(jù)人的指令一步一步去工作，完成某種特定的任務(wù)。這種人和計(jì)算體系之間交流的過程就是編程。 【實(shí)例名稱】 JS設(shè)計(jì)滑動(dòng)條效果(二) 【實(shí)例描述】 為了增加頁(yè)面的美觀性，可使用滑動(dòng)條來顯示百分比，而且還可以拖曳滑動(dòng)條改變百分比的大小。本例學(xué)習(xí)如何實(shí)現(xiàn)這種功能的滑動(dòng)條。 【實(shí)例代碼】 <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">
//對(duì)象未創(chuàng)建完成之前，不能在函數(shù)之中用this
function setTrackBar(trackBar, min, max, barPos)
//指定的div，最小值，最大值和位置
{
this.trackBar = trackBar; //承載滑動(dòng)條的對(duì)象
this.sliderIdStr = trackBar + "_slider";
//滑動(dòng)條
this.trackBarId = document.getElementById(this.trackBar);
//獲取div
this.sliderId = null; //未創(chuàng)建滑動(dòng)條對(duì)象
this.min = (min>=0)?min:0;//最小值不能小于0
this.max = (max>=min)?max:min;//最大值必須大于最小值
this.barPos = (barPos>=min && barPos<=max)?barPos:min;
//位置必須在最大和最小之間 this.orientation = "h"; //設(shè)置對(duì)象和滑動(dòng)條的位置
this.trackBarWidth = 100;
this.trackBarHeight = 10
this.sliderWidth = 10;
this.sliderHeight = 10;
this.Create = Create;
this.draging = false;
this.offset = 0; this.BeforeDrag = BeforeDrag;//綁定滑動(dòng)事件
this.OnDrag = OnDrag;
this.EndDrag = EndDrag;
}
function Create(trackBar1)//創(chuàng)建滑動(dòng)條的方法
{
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;
//設(shè)置滑動(dòng)條的初始位置
this.trackBarId.style.height = this.trackBarHeight;
this.sliderId.style.width = this.sliderWidth;
this.sliderId.style.height = this.sliderHeight; return true;
}var curTrackBar = null;//準(zhǔn)備拖拽
function BeforeDrag(trackBar)
{
if (event.button != 1)
//如果不是鼠標(biāo)左鍵，則返回
{
return;
}
document.body.style.cursor = "n-resize";
//鼠標(biāo)的樣式
curTrackBar = trackBar;
curTrackBar.draging = true;
curTrackBar.offset = curTrackBar.trackBarId.style.pixelTop + curTrackBar.sliderId.style.pixelTop+curTrackBar.sliderId.offsetHeight- event.clientY;
}
function OnDrag()
//實(shí)現(xiàn)拖拽的方法
{
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; //如果拖動(dòng)到最底端
}
else if(phyPos >= (curTrackBar.trackBarId.offsetHeight-
curTrackBar.sliderId.offsetHeight))
{
phyPos = curTrackBar.trackBarId.offsetHeight -
curTrackBar.sliderId.offsetHeight;
}
//改變滑動(dòng)條的位置
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()//結(jié)束拖拽
{
if (!curTrackBar)
{
return;
}
document.body.style.cursor = "default";
curTrackBar.draging = false;
}function OnTrackBarTxt() //拖拽時(shí)，改變滑動(dòng)條的值
{
document.getElementById("info").innerHTML =
curTrackBar.barPos+ " / " + curTrackBar.max;
}document.onmousemove = OnDrag;
//鼠標(biāo)移動(dòng)時(shí)，實(shí)現(xiàn)拖拽-開始滑動(dòng)
document.onmouseup = EndDrag;
//鼠標(biāo)離開時(shí)，結(jié)束拖拽-即結(jié)束滑動(dòng)
var trackBarObj1 = new setTrackBar("trackBar1", 0, 100,100);
//配置滑動(dòng)條，指定最小值和最大值
trackBarObj1.orientation = "v";//滑動(dòng)條的方法-垂直
trackBarObj1.trackBarWidth = 15;//對(duì)象的寬度
trackBarObj1.trackBarHeight = 100;//對(duì)象的高度
trackBarObj1.sliderWidth = 15;//滑動(dòng)條的寬度
trackBarObj1.sliderHeight = 10; //滑動(dòng)條的高度
trackBarObj1.Create("trackBarObj1");//創(chuàng)建滑動(dòng)條
</script>
</body>
</html>
【運(yùn)行效果】  【難點(diǎn)剖析】 本例提供了關(guān)于滑動(dòng)條的5個(gè)常用方法。“setTrackBar”方法用來設(shè)置滾動(dòng)條的最小值、最大值和位置等�！癈reate”方法用來創(chuàng)建滑動(dòng)條的承載器和滑動(dòng)條本身�！癇eforeDrag”方法主要判斷用戶的操作是否為“拖曳”。“OnDrag”方法表示拖曳過程中滑動(dòng)條的改變。“EndDrag'’方法用來實(shí)現(xiàn)拖曳完成后的一些狀態(tài)恢復(fù)。這些方法可以直接移植到其他項(xiàng)目中使用。 【源碼下載】 為了JS代碼的準(zhǔn)確性，請(qǐng)點(diǎn)擊：JS設(shè)計(jì)滑動(dòng)條效果(二) 進(jìn)行本實(shí)例源碼下載
使用編程語(yǔ)言寫的程序，由于每條指令都對(duì)應(yīng)計(jì)算機(jī)一個(gè)特定的基本動(dòng)作，所以程序占用內(nèi)存少、執(zhí)行效率高。
| 
