音樂網站開發：實現點選按鈕切換頁面背景圖的功能
阿新 • • 發佈：2018-11-11
最近這一星期在做一個簡單小型的音樂播放器網站，目前各種功能基本都已經實現，包括切換上一曲下一曲，播放與暫停，隨機播放單曲迴圈順序播放模式切換，一首播放完畢自動按模式切換至下一曲，載入單句歌詞及所有歌詞等功能。另外就是本篇部落格要介紹的功能了，點選按鈕切換網頁背景圖。通過最近的學習，發現自己的js確實提升了不少，以上功能除了非同步載入歌詞用到Java之外，其它全是由js來實現的，這與之前做這個部落格網站完全不一樣，部落格網站幾乎沒有用到幾行js因為當時對js基本是一無所知。我也發現了js確實跟Java有很多相似的地方，不過它們兩個最大的卻別還是一個是前端的，一個是後端的。下面就進入本篇部落格的整體吧。
實現該功能的js程式碼其實很簡單，只需定義一個函式，然後在該按鈕里加上該函式的監聽事件
/**
* 改變背景
*/
function changeBack(){
var i=Math.round(Math.random()*28);//隨機生成一個整數
var body=document.getElementById("body");
//alert(i);
body.background="image/back/back"+i+".jpg";//16.22.21.(19.20.18G)
}<span id="cback" title="總有一個你喜歡" onclick="changeBack()">切換背景</span>
最後，要在body標籤中新增以下內容
<body id="body" background="http://www.zy52113.com/Minimusic/image/back/back16.jpg">
接下來，點選切換背景按鈕，就會呼叫changeBack()函式，該函式會根據body的id將body標籤裡的background屬性改為隨機的圖片。以下是效果圖
以上部落格已同至本人個人部落格網站，歡迎您的訪問！