也爲CSDN Blog加效果

雖然開通CSDN Blog已經很久了，但卻一直不知道該怎麼加效果，看着別人的Blog那麼眩，真是羨慕死了。直到前段時間在網上看到一篇文章，《CSDN blog 添加音樂和天氣預報效果》，這才恍然大悟，原來給自己的Blog加效果這麼簡單。於是利用五一的空檔，爲自己的Blog增加了效果。
　　登陸自己的Blog後，選擇“配置”，然後在“公告”欄中編寫自己想要的效果。你可能很奇怪，怎麼在這裏編寫？沒錯，就是在這裏編寫，公告欄可是支持HTML的。至於我加的效果呢，就比較簡單了，只是在公告欄顯示一個日期，增加了背景音樂，別的也沒什麼，惟一能吹一下的就是日期顯示的顏色和背景音樂在每次登陸時都會改變（喂，別拿雞蛋飛我）。那麼我是怎麼做的呢？看一下代碼：
　　<!-- 日期顯示和背景音樂的代碼是動態生成的，因此這裏要使用div -->
　　<div id='media'></div>
　　<script language='javascript'>
　　　　var date = new Date(); //聲明一個時間對象，以獲取當前時間
　　　　var sec = date.getSeconds() % 10; //獲取當前的秒數，跟10取模
　　　　
　　　　var MusicName; //用於保存背景音樂的URL路徑
　　　　var StyleName = 'media' + sec; //用於保存樣式名，該樣式用來顯示日期顏色
　　　　switch (sec) //根據取模的結果判斷播放哪首歌曲
　　　　{
　　　　　　case 1:
　　　　　　　　MusicName = 'http://radio.cqumzh.cn/music/caocao.mp3';
　　　　　　　　break;
　　　　　　case 2:
　　　　　　　　MusicName = 'http://www.fawjy.com/hj/wy/a/dxh.mp3';
　　　　　　　　break;
　　　　　　case 3:
　　　　　　　　MusicName = 'http://ziwo.chengdeshi.com/mp3/江南.mp3';
　　　　　　　　break;
　　　　　　case 4:
　　　　　　　　MusicName = 'http://image2.sina.com.cn/ent/pc/2003-03-24/55/3_28-55-918-58_2003032419327.rm';
　　　　　　　　break;
　　　　　　case 5:
　　　　　　　　MusicName = 'http://ziwo.chengdeshi.com/mp3/寧夏.mp3';
　　　　　　　　break;
　　　　　　case 6:
　　　　　　　　MusicName = 'http://www.vincentjun.com/music/wudang.mp3';
　　　　　　　　break;
　　　　　　case 7:
　　　　　　　　MusicName = 'http://www.lylhg.com/xzc/up/updj/200631936737737.mp3';
　　　　　　　　break;
　　　　　　case 8:
　　　　　　　　MusicName = 'http://www.yuhan.com.cn/zhufu/143740.mp3';
　　　　　　　　break;
　　　　　　case 9:
　　　　　　　　MusicName = 'http://voice.sohu.com/adhtml/ivrqrj/ad/ling9.mp3';
　　　　　　　　break;
　　　　　　default: //處理模爲0的情況及其它特殊情況
　　　　　　　　MusicName = 'http://www.gzlis.edu.cn/xyzx/mp3/qianzihe.mp3';
　　　　　　　　break;
　　　　}
　　　　
　　　　//生成背景音樂的HTML代碼
　　　　var divmedia = '<embed src=/'' + MusicName + '/' type=/'audio/x-pn-realaudio-plugin/' width=/'0/' height=/'0/' autostart=/'true/' loop=/'true/'></embed>';
　　　　//生成日期顯示的HTML代碼
　　　　var datemedia = '<div id=/'' + StyleName + '/'>' + date.getYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日</div>';

　　　　var strHTML = divmedia + datemedia;
　　　　document.getElementById('media').innerHTML = strHTML; //利用div，將HTML代碼動態增加到頁面中
　　</script>
以上代碼可以根據登陸時的秒數分別顯示10種不同的效果。不過這裏還想說明幾件事：
　　1.<embed>標記並不是W3C推薦的，W3C推薦的是<object>標記；
　　2.這裏訪問id爲media的<div>標記用的是document.getElementById('media')，而不是document.all.media，這裏使用的方式纔是被推薦的；
　　3.innerHTML屬性，用來改變標記內部的HTML代碼，還有一個innerText屬性，可以用來改變標記內部的字符串，利用innerHTML和innerText屬性，可以對頁面實現動態刷新；
　　4.我這裏的歌曲都直接引自網上，這不是一個好的方式，相關內容可以參考《CSDN blog 添加音樂和天氣預報效果》。
　　至此，HTML代碼雖然已經寫好了，但是相應的樣式還沒加呢，所以還要在了“自定義CSS樣式”欄中做些處理，我編寫的樣式如下：
　　#media {width : 100%; text-align : center; line-height : 12; font-weight : bold; font-size : 24;}
　　#media0 {color : maroon;}
　　#media1 {color : #fc6;}
　　#media2 {color : #3c0;}
　　#media3 {color : #0cf;}
　　#media4 {color : #00c;}
　　#media5 {color : #609;}
　　#media6 {color : black;}
　　#media7 {color : #36f;}
　　#media8 {color : #f60;}
　　#media9 {color : #fcf;}
這裏用的都是id樣式。
　　修改之後點擊“保存”按鈕，提示已更新後，就可以去自己Blog的首頁看看了。