簡介： 網頁物件其實也可以經過JavaScript動態產生，甚至可以附加一個計時器讓新物件持續跑動。本單元就是以此技術設計一個好像在下雪的網頁。 網頁設計 開啟一個HTML網頁，將背景設為黑色當作是夜空背景。並設定啟動時執行 MakeSnow 程式，如下； 雪花樣式 請到主功能表的「格式」項目選擇「新樣式」出現如下視窗後改名稱為「.snow」，位置設為絕對位置(position=absolute)，字型大小為10px，字的顏色為白色。稍後我們會用文字「*」代表雪花外型，絕對位置表示可以用程式移動它，字型大小就是雪片大小，顏色當然是白色囉！ 設定完成檢視原始檔應該會看到： 有時候上面文字未立即顯示請切換到設計頁面再切回來(等於重新整理)就會看到了！ 造雪程式 接著請寫MakeSnow的JavaScript程式：' 此程式以迴圈用 document.createElement 函數連續產生200個 span物件作為雪片。新物件套用我們做好的雪片樣式(snow)，內部文字設為「*」(長得像雪花嘛！)，然後將新物件加到 document.body也就是網頁上面。最後呼叫 Fall程式設定它的位置以及移動方式。 此程式先取得網頁寬減去雪花寬的差值，就是雪花左緣可以活動的範圍W，上下活動範圍H依此類推。接著用亂數產生器隨機給新雪花一個X與Y位置，也用亂數給雪花X與Y速度，範圍是1~3，都是正值表示雪花只會往「右下方」或快或慢的飄。接著檢查若雪花飄出畫面右或下方時要拉回左或上方，這樣就可以重複使用200片雪花，不必一直產生新物件了！ 試試看執行畫面會像這樣： 風向調整 但是目前的雪花只會往右下方走，看起來像是有微風往右吹的樣子！如果希望是「無風」狀態程式該如何修改呢？ 重點在Vx值必須有正有負，只要將該行程式改成： var vX = Math.random() * 3 - 1.5; 這樣看起來就很像無風時自然的飄動了！原因是 Math.random()*3 的結果是一個介於0與3之間的數字，減去1.5就會是介於-1.5~1.5之間的隨機數，Vx就會有左也有右了！ 如何以圖案代替雪花？ span物件只能裝文字，要讓動態物件顯示圖案，可以用div物件取代，在新樣式設定時給定背景圖案即可！你也可玩成這個樣子： 樣式表與MakeSnow程式需改成： 球圖案就是這一顆囉！