也为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的首页看看了。