編程(Programming)是編定程序的中文簡稱,就是讓計算機代碼解決某個問題,對某個計算體系規定一定的運算方式,使計算體系按照該計算方式運行,并最終得到相應結果的過程。為了使計算機能夠理解(understand)人的意圖,人類就必須將需解決的問題的思路、方法和手段通過計算機能夠理解的形式告訴計算機,使得計算機能夠根據人的指令一步一步去工作,完成某種特定的任務。這種人和計算體系之間交流的過程就是編程。 【實例名稱】 JS代碼實現文字逐個閃亮(霓虹燈效果) 【實例描述】 常見的霓虹燈效果,是通過文字逐個循環顯示實現。本例通過文本的顏色變換,實現文字的霓虹燈效果。 【實例代碼】 <html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標題頁</title>
<script language="JavaScript">
text = "歡迎光臨我們的俱樂部"; //顯示的文字
color1 = "gray"; //文字的顏色
color2 = "blue"; //轉換的顏色
fontsize = "6"; //字體大小
speed = 100; //轉換速度 (毫秒)
i = 0;
if (navigator.appName == "Netscape") {//瀏覽器不同,輸出的標簽不同
document.write("<layer id=myDiv visibility=show></layer><br><br><br>");
}
else {
document.write("<div id=myDiv></div>");
}
function changeCharColor()
{
if (navigator.appName == "Netscape") { //Netscape瀏覽器的情況下
document.myDiv.document.write("<center><font face=arial size =" + fontsize + "><font color=" + color1 + ">");
for (var j = 0; j < text.length; j++) {
if(j == i) {
document.myDiv.document.write("<font face=arial color=" + color2 + ">" + Text.charAt(i) + "</font>");
}
else {
document.myDiv.document.write(text.charAt(j));
}
}
document.myDiv.document.write('</font></font></center>');
document.myDiv.document.close();
}
if (navigator.appName == "Microsoft Internet Explorer") //IE瀏覽器的情況下
{
str = "<center><font face=arial size=" + fontsize + "><font color=" + color1 + ">";
for (var j = 0; j < text.length; j++) { //循環輸出指定字體大小和顏色的文本
if( j == i) {
str += "<font face=arial color=" + color2 + ">" + text.charAt(i) + "</font>";
}
else {
str += text.charAt(j);
}
}
str += "</font></font></center>";
myDiv.innerHTML = str; //在div中顯示文本
}
(i == text.length) ? i=0 : i++; //如果i的值不大于文本的長度,則自增
}
setInterval("changeCharColor()", speed); //通過定時器,實現不斷的循環
</script>
</head>
<body>
</body>
</html>
【運行效果】  【難點剖析】 本例的重點是霓虹燈效果的原理,霓虹燈就是逐個點亮一段文字。本例中通過循環獲取當前要點亮的字符,然后跟據指定的顏色和字體大小,設置此字符的樣式,本例中用顏色變化代表點亮某個字符。修改后的文本再用div動態輸出,以實現文本的動態改變效果。 【源碼下載】 本實例JS代碼下載
使用編程語言寫的程序,由于每條指令都對應計算機一個特定的基本動作,所以程序占用內存少、執行效率高。 |