菜鳥救星講程式:誰都學得會系列-用程式JavaScript來點亮聖誕燈 發佈日期: 2020-12-252020-12-24 作者: yijun 文、意如老師 聖誕節要到了,應景一下來實作一個點亮聖誕燈的網頁。 首先,準備幾張不一樣顏色的聖誕樹圖 其實你只要準備一張圖,其他顏色的圖都可以使用編修軟體製作出來的。 例如,我們準備這張圖: 如果您沒有photoshop之類的軟體,可以使用線上的編修軟體。 開啟圖片後,點選 1. 影像2. 調整3. 色相/飽和度4. 隨便拉一下色相,即可改變顏色 改好顏色後,另存新檔,這裡請最少準備5張不一樣顏色的圖片。 接下來在您的桌面或D槽按下右鍵建立一個資料夾當作我們工作的資料夾,取名為mytree。 進入您的資料夾後,再建立一個資料夾(取名為:images),這個資料夾專門放我們會使用到的所有圖片,所以把剛剛準備好的幾張圖片都放進裡面。 接下來就可以開始寫程式了,回到mytree資料夾。1. 右鍵新增文字文件2. 取名為treepage.html。 1. 點選treepage.html按下右鍵2. 開啟檔案3. 選擇預設程式4. 記事本5. 確定 用記事本開啟就可以開始寫程式了~ 因為我們要做的是網頁程式,所以需把每一張網頁一定要有的語法先寫好。 例:網頁開始:<html> 網頁標頭:<head><title>網頁標題寫在這裡</title></head>網頁內容:<body>網頁的內容都寫在這裡</body>網頁結束:</html> 如下: 接著按下檔案右鍵,用瀏覽器開啟,即可看到網站效果。 接下來回到記事本,在網頁內容中先寫一個置中標籤<center> </center>,等等把所有要置中的元件放進去。 這次準備的聖誕樹共有五個顏色:灰、紫、綠、黃、紅 這次點亮聖誕燈的秘訣就是點選按鈕(置換圖片),看起來效果就像開關燈一樣,所以我們需要做的是預設一張圖片再加上五顆按鈕。 先做預設圖片(img5.jpg),語法如下: 插入圖片:<img src=”圖片路徑” width=”寬度”>,記得插入在置中標籤裡。 圖片目前路徑: <image src=”images/img5.jpg” width=”500px”> 看看網頁是否正常出現預設圖片了? 接下來要做五顆按鈕,分別為:關燈、紫燈、綠燈、黃燈、紅燈。按鈕語法為<button>按鈕名稱</button>分段落語法為<p></p>(這邊單純想讓按鈕放在圖片下而已) 使用瀏覽器測試看看,目前只有介面而已還沒有任何功能。 重點來了,接下來就要開始寫點選按鈕之後要做什麼事情了。 事件寫在onclick=”” 中。這次我們先做開紅色燈的這件事,其實就是把原本的預設圖片改成紅色這一張(img4.jpg) 因為要去改變預設圖,所以需要把剛剛的img5.jpg 上的<img>標籤取一個名字(id),這裡我取名叫mytreeimg,方便我們等等找到它。 再來我們就需要使用document.getElementById(‘mytreeimg’)來找到預設的<img>這個標籤了,找到它之後把它的路徑位址(src)改成紅燈這一張圖(img4.jpg) 完整語法如下:<button onclick=”document.getElementById(‘mytreeimg’).src=’images/img4.jpg'”>紅燈</button> 來看看效果吧~點選紅燈,切換紅燈照,感覺就像開燈一樣。 不可思議的非常簡單吧!再來只要重複以上動作,把另外四顆按鈕都加上功能就完成了。 完整語法如下: <html> <head> <title>網頁標題寫在這裡</title></head><body><center> <image src=”images/img5.jpg” width=”500px” id=”mytreeimg”> <p> <button onclick=”document.getElementById(‘mytreeimg’).src=’images/img5.jpg'”>關燈</button> <button onclick=”document.getElementById(‘mytreeimg’).src=’images/img1.jpg'”>紫燈</button> <button onclick=”document.getElementById(‘mytreeimg’).src=’images/img2.jpg'”>綠燈</button> <button onclick=”document.getElementById(‘mytreeimg’).src=’images/img3.jpg'”>黃燈</button> <button onclick=”document.getElementById(‘mytreeimg’).src=’images/img4.jpg'”>紅燈</button> </p></center></body></html> 趁著聖誕節,趕快把這個效果放到您的網頁上吧! 加入菜鳥救星官方Line並回覆「我想看文章」,不定期獲得更多知識吧! 不同頻道,不同知識! Facebook Instagram Youtube 分享此文:分享到 Twitter(在新視窗中開啟)按一下以分享至 Facebook(在新視窗中開啟)按一下以分享到 Telegram(在新視窗中開啟)按一下即可以電子郵件傳送連結給朋友(在新視窗中開啟)請按讚:喜歡 正在載入... 相關