編程(Programming)是編定程序的中文簡稱,就是讓計算機代碼解決某個問題,對某個計算體系規定一定的運算方式,使計算體系按照該計算方式運行,并最終得到相應結果的過程。為了使計算機能夠理解(understand)人的意圖,人類就必須將需解決的問題的思路、方法和手段通過計算機能夠理解的形式告訴計算機,使得計算機能夠根據人的指令一步一步去工作,完成某種特定的任務。這種人和計算體系之間交流的過程就是編程。 【實例名稱】 跟隨鼠標的彩色文字 【實例描述】 跟隨鼠標的文本可以很輕松實現,本例要實現的是文字不僅要跟隨鼠標,而且顏色會不斷變化。 【實例代碼】 <SCRIPT language=javascript>
var message="歡 迎 參 加 北 京 奧 運 會 !";
//要跟隨鼠標的文本
var x,y;
var step=15;
//文本之間的距離
var flag=0; message=message.split("");
//將文本切換成數組
var xpos=new Array();
for (i=0;i<=message.length-1;i++) {
//設置所有文本的初始x坐標
xpos[i]=-50;
}
var ypos=new Array();
for (i=0;i<=message.length-1;i++) {
//設置所有文本的初始Y坐標
ypos[i]=-50;
}
function handlerXY(e) {
//根據瀏覽器的不同,獲取鼠標的x,y坐標
x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX+10;
y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY;
flag=1;
}
function makesnake() {
if (flag==1 && document.all) {
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step;
//設置文本之間的顯示距離
ypos[i]=ypos[i-1];
//設置文本的y坐標
}
xpos[0]=x+step;
ypos[0]=y;
for (i=0; i<=message.length-1; i++) {
var thisspan = eval("span"+(i)+".style");
thisspan.posLeft=xpos[i];
thisspan.posTop=ypos[i];
thisspan.color=Math.random() * 255 * 255 * 255
+ Math.random() * 255 * 255 + Math.random() * 255;
}
}
else if (flag==1 && document.layers) {
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step;
ypos[i]=ypos[i-1];
}
xpos[0]=x+step;
ypos[0]=y; for (i=0; i<message.length-1; i++)
//根據字符的個數創建多個span元素,用來顯示字符
{
var thisspan = eval("document.span"+i);
thisspan.left=xpos[i]; //指定span的x坐標
thisspan.top=ypos[i]; //指定span的y坐標
//創建隨機的顏色值
thisspan.color=Math.random() * 255 * 255 *
255 + Math.random() * 255 * 255 + Math.random() * 255;
}
}
}
for (i=0;i<=message.length-1;i++) { //循環輸出文本信息
document.write("<span id='span"+i+"' class='spanstyle'>");
document.write(message[i]);
document.write("</span>");
} if (document.layers) {
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = handlerXY;
function firstLoad() { //窗體一加載便觸發的事件
makesnake(); //實現跟隨鼠標文本的方法
window.setTimeout("firstLoad();", 5);//定時執行此方法
}
</SCRIPT>
【運行效果】 
【難點剖析】 本例的重點如下: (1)動態輸出span元素,用來顯示文本內容。動態輸出span元素使用的是“document.write”方法,此處要注意每個“span”元素ID的創建方式。 (2)獲取鼠標的坐標,根據坐標位置顯示文本信息。獲取鼠標坐標使用的是“event.clientx”和“event.clientY”屬性。 (3)動態實現顏色的變化。本例使用了“Math.random0*255*255 * 255”創建一個隨機顏色值,然后使用span元素的“color”屬性設置文本最后顯示的顏色。 【源碼下載】 本實例JS代碼下載
使用編程語言寫的程序,由于每條指令都對應計算機一個特定的基本動作,所以程序占用內存少、執行效率高。 |