[教學] (教學第38篇) 堆疊與元件位置

元件, 堆, 位置

這一節是本教學最後一個單元，小誌將不在詳細的理論解說了！因為所有的物件、元件…等等的理論之前都談過了，現在是驗收的時刻了，小誌直接將之前所談的迴圈（for）、判斷敘述（if）、陣列物件(Array)、元件堆疊、元件位置控制等等，直接應用在本節的綜合演練範例中。

如果你一路將本教學閱讀至此，相信你已具備相當的JavaScript設計能力，所謂：「師父領進門、修行在個人」，小誌能給你的只是一塊塊單獨的積木，要如何將這些積木拼成堡壘，就得靠各位讀者自己囉，小誌誠心的希望大家在閱讀本書之後能設計出屬於自己的JavaScript，而不要到網路上直接將別人的成果拷貝到自己的網站中使用，或者是買本集JavaScript程式大全的書回來抄抄寫寫。呵～小誌廢話太多了，不要見怪ㄚ！

綜合演練：亂數飛行集中定位的文字

何謂亂數飛行？亂數飛行就是我們不在CSS樣式表中直接指定文字字串的位置，因為如果在CSS樣式表中設定則文字字串的位置將是固定的！但是，我們可以使用JavaScript程式來動態的指定文字字串的位置。

樓主熱帖

心安，平安
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

小誌

　暱稱: 小誌
　頭銜: 曾經也是水電工

管理員 Rank: 9 Rank: 9 Rank: 9

帖子: 1190
主題: 394
精華: 113
積分: 1747
點名: 1
作業系統: Vista
軟體版本: Office 2003
閱讀權限: 200
性別: 男
來自: 台灣
註冊時間: 2010-5-1
最後登錄: 2024-11-25

2021牛年全勤獎章好學求知勳章熱烈參與勳章 2017 雞年全勤獎章 2018 狗年全勤獎章 2019 豬年全勤獎章 2020鼠年全勤獎章

3^#

發表於 2010-5-20 16:04 | 只看該作者

開始主文(<BODY>標籤)並在網頁標籤<DIV>中直接加入我們所宣告的CSS屬性類別(class)設定CLASS="XXXX"，同時，我們必須將<BODY>標籤內容加上onload="Roundtext()"成為<BODY onload="Roundtext()">，當網頁被載入時就呼叫Roundtext()函式開始產生有三個層次亂數飛行而後集中定位的文字字串特效。
在網頁標籤<div>中直接加入我們所宣告的CSS屬性類別(class)設定後，必須給被包括在<DIV>與</DIV>網頁標籤中的字串文字一個特有的辨別名稱(id)。請特別注意：id 的名稱內容必須是連續的編號名稱，同時主名稱必須配合JavaScript 程式來命名！(id="主名稱＋連續數字編號")
1. <BODY onload="Roundtext()">
2. <DIV class="Style1" id="fly1">亂數飛行集中定位的文字字串</DIV>
3. <DIV class="Style2" id="fly2">亂數飛行集中定位的文字字串</DIV>
4. <DIV class="Style3" id="fly3">亂數飛行集中定位的文字字串</DIV>
複製代碼
注意！！
在<DIV>與</DIV>網頁標籤中必須加入各層次的文字字串，此處的文字字串並非由程式來動態產生！程式只有動態地來設定各層次文字字串的位置(Position)。
加入結束網頁主文(</BODY>)與網頁主體(</html>)標籤，大公告成！

<HTML>
<HEAD>
<TITLE>綜合演練</TITLE>
<STYLE>
<!--
.Style1 {COLOR: #0000ff; FONT-SIZE: 16pt; POSITION: absolute; }
.Style2{COLOR: #00ff00; FONT-SIZE: 16pt; POSITION: absolute;}
.Style3 {COLOR: #ff0000; FONT-SIZE: 16pt; POSITION: absolute; }
-->
</STYLE>
<SCRIPT language="javascript">
var speed = 5
var Count = 0
var Fcount = 50
var TimeID
var IsFly = false
var lay
var StarFly = new Array()
StarFly[1] = 0
StarFly[2] = 50
StarFly[3] = 0
StarFly[4] = 50
StarFly[5] = 0
StarFly[6] = 50
var EndFly = new Array()
EndFly[1] = 10
EndFly[2] = 30
EndFly[3] = 20
EndFly[4] = 40
EndFly[5] = 30
EndFly[6] = 50
function Roundtext(){
for(var i = 1; i <=3; i++)
{
lay = document.all("fly"+i)
lay.style.visibility = "visible"
StarFly[i*2-1] = Math.round(Math.random()*document.body.clientWidth - lay.style.posWidth)
StarFly[i*2] = Math.round(Math.random()*document.body.clientHeight- lay.style.posHeight)
}
Count++;
if(IsFly==false)
{
IsFly = true;
for(var i = 1; i <= 3; i++)
{
lay.style.posLeft = Math.round(StarFly[i*2-1] + (EndFly[i*2] - StarFly[i*2-1])/Fcount * Count)
lay.style.posTop = Math.round(StarFly[i*2] + (EndFly[i*2-1] - StarFly[i*2])/Fcount * Count)
lay = document.all("fly"+i)
if(Count <= Fcount){IsFly = false}
}
TimerID = setTimeout("Roundtext()",speed)
}
else{clearTimeout(TimeID)}
}
</SCRIPT>
</HEAD>
<BODY onload="Roundtext()">
<DIV class="Style1" id="fly1">亂數飛行集中定位的文字字串</DIV>
<DIV class="Style2" id="fly2">亂數飛行集中定位的文字字串</DIV>
<DIV class="Style3" id="fly3">亂數飛行集中定位的文字字串</DIV>
</BODY></HTML>

複製代碼

心安，平安
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

TOP

小誌

　暱稱: 小誌
　頭銜: 曾經也是水電工

管理員 Rank: 9 Rank: 9 Rank: 9

帖子: 1190
主題: 394
精華: 113
積分: 1747
點名: 1
作業系統: Vista
軟體版本: Office 2003
閱讀權限: 200
性別: 男
來自: 台灣
註冊時間: 2010-5-1
最後登錄: 2024-11-25

2021牛年全勤獎章好學求知勳章熱烈參與勳章 2017 雞年全勤獎章 2018 狗年全勤獎章 2019 豬年全勤獎章 2020鼠年全勤獎章

2^#

發表於 2010-5-20 16:01 | 只看該作者

這個效果必須先在CSS樣式表中先決定三個層次的文字字串的基本樣式，但是我們並不設定文字字串的位置，我們把文字字串的位置保留到JavaScript程式中動態設定，由JavaScript程式動態設定各層次文字字串的位置，同時利用JavaScript程式來控制各個層次文字的出現與否！

定義三組用來作為漸成文字堆疊層次的網頁文字樣式：在主文中(包括在<BODY>與</BODY>標籤之中的網頁內容)凡是遇到網頁標籤為<DIV>，並且在<DIV>標籤中加註樣式類別時，就將其被包括在<DIV>與</DIV>網頁標籤中的字串文字格式定為我們所宣告的網頁文字樣式：
1. .Style1{COLOR: #0000ff; FONT-SIZE: 16pt; POSITION: absolute;}
2. .Style2{COLOR: #00ff00; FONT-SIZE: 16pt; POSITION: absolute;}
3. .Style3{COLOR: #ff0000; FONT-SIZE: 16pt; POSITION: absolute;}
複製代碼
加註樣式類別為Style1的CSS樣式性質宣告將使網頁標籤的文字字串擁有藍色、字體大小為１６pt的外觀樣式。

加註樣式類別為Style２的CSS樣式性質宣告將使網頁標籤的文字字串擁有綠色、字體大小為１６pt的外觀樣式。

加註樣式類別為Style3的CSS樣式性質宣告將使網頁標籤的文字字串擁有紅色、字體大小為１６pt的外觀樣式。
程式內容
1. SCRIPT language="javascript">
2. var speed = 5　//亂數變換位置的速度
3. var Count = 0
4. var Fcount = 50　//亂數變換位置的次數
5. var TimeID
6. var IsFly = false　//判斷是否進行飛行動作的旗標變數
7. var lay
9. //以下為亂數飛行字串初始的位置定位設定
10. var StarFly = new Array()
11. StarFly[1] = 0
12. StarFly[2] = 50
13. StarFly[3] = 0
14. StarFly[4] = 50
15. StarFly[5] = 0
16. StarFly[6] = 50
18. //以下為亂數飛行字串最後的位置定位設定
19. var EndFly = new Array()
20. EndFly[1] = 10　//第一層次亂數飛行字串最後的水平軸(Left)位置定位設定
21. EndFly[2] = 30　//第一層次亂數飛行字串最後的垂直(Topt)位置定位設定
22. EndFly[3] = 20　//第二層次亂數飛行字串最後的水平軸(Left)位置定位設定
23. EndFly[4] = 40 //第二層次亂數飛行字串最後的垂直軸(Top)位置定位設定
24. EndFly[5] = 30　//第三層次亂數飛行字串最後的水平軸(Left)位置定位設定
25. EndFly[6] = 50　//第三層次亂數飛行字串最後的垂直軸(Top)位置定位設定
27. function Roundtext(){
29. for(var i = 1; i <=3; i++)
30. {
31. lay = document.all("fly"+i)　
32. //"fly"為網頁中 <DIV>標籤內所指定的主id名稱
33. lay.style.visibility = "visible"
34. StarFly[i*2-1] = Math.round(Math.random()*document.body.clientWidth - lay.style.posWidth)
35. StarFly[i*2] = Math.round(Math.random()*document.body.clientHeight- lay.style.posHeight)
36. }
38. Count++;
39. if(IsFly==false)
40. {
41. IsFly = true;
42. for(var i = 1; i <= 3; i++)
43. {
44. //動態亂數設定文字字串的水平位置(Left)
45. lay.style.posLeft = Math.round(StarFly[i*2-1] + (EndFly[i*2] - StarFly[i*2-1])/Fcount * Count)
46. //動態亂數設定文字字串的垂直位置(Top)
47. lay.style.posTop = Math.round(StarFly[i*2] + (EndFly[i*2-1] - StarFly[i*2])/Fcount * Count)
48. lay = document.all("fly"+i)
50. if(Count <= Fcount){IsFly = false}
51. }
52. TimerID = setTimeout("Roundtext()",speed)
53. }
54. else{clearTimeout(TimeID)}
55. }
56. </SCRIPT>
複製代碼

心安，平安
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

TOP