編程(Programming)是編定程序的中文簡稱,就是讓計算機代碼解決某個問題,對某個計算體系規定一定的運算方式,使計算體系按照該計算方式運行,并最終得到相應結果的過程。為了使計算機能夠理解(understand)人的意圖,人類就必須將需解決的問題的思路、方法和手段通過計算機能夠理解的形式告訴計算機,使得計算機能夠根據人的指令一步一步去工作,完成某種特定的任務。這種人和計算體系之間交流的過程就是編程。 【實例名稱】 跟隨鼠標的旋轉背景 【實例描述】 鼠標在頁面中移動的時候,會一直有一個旋轉的橢圓點跟隨它。本例學習如何實現這種效果。 【實例代碼】 <SCRIPT LANGUAGE="JavaScript">
var Clrs = new Array(6);
//隨機的背景顏色,保存在一個數組中
Clrs[0] = 'ff0000';
Clrs[1] = '00ff00';
Clrs[2] = '000aff';
Clrs[3] = 'ff00ff';
Clrs[4] = 'fff000';
Clrs[5] = 'fffff0';
var yBase = 200;
var xBase = 200;
var step;
var currStep = 0;
var Xpos = 1;
//橫坐標變量
var Ypos = 1;
//縱坐標變量
if (document.all) {
function MoveHandler()
{
Xpos = document.body.scrollLeft+event.x;
//設置橫坐標
Ypos = document.body.scrollTop+event.y;
//設置縱坐標
}
document.onmousemove = MoveHandler;
//綁定鼠標的移動事件
}
function Comet()
{
if (document.all) {
yBase = window.document.body.offsetHeight / 4;
xBase = window.document.body.offsetWidth / 4;
}
if (document.all) {
for ( i = 0 ; i < starsDiv.all.length ; i++ ) {
//循環設置每個div的顯示位置
step = 3;
starsDiv.all[i].style.top = Ypos +
yBase*Math.cos((currStep + i*4)/12)*Math.cos(0.7+currStep/200);
starsDiv.all[i].style.left = Xpos +
xBase*Math.sin((currStep + i*3)/10)*Math.sin(8.2+currStep/400);
for (ai = 0; ai < Clrs.length; ai++) {
var c=Math.round(Math.random()*[ai]);
//獲取隨機的一個顏色值
}
starsDiv.all[i].style.background = Clrs[c];
//動態設置div的背景色
}
}
currStep += step;
setTimeout("Comet()", 5);
//設置定時器-實現旋轉效果
}
Comet();
</script>
【運行效果】 
【難點剖析】 本例的重點是旋轉背景所在的層。跟隨鼠標的旋轉背景由多個不同顏色的點組成,其中每個點是一個層(div),每個層的顏色不同。這些層的位置通過鼠標的坐標獲取,此處要注意層的位置使用“position:relative”,表示相對坐標,其坐標的原始點是這些層的父級節點“starsDiv”。 【源碼下載】 本實例JS代碼下載
使用編程語言寫的程序,由于每條指令都對應計算機一個特定的基本動作,所以程序占用內存少、執行效率高。 |