也为CSDN Blog加效果
2008-08-25 20:44
246 查看
虽然开通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的首页看看了。
登陆自己的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的首页看看了。
相关文章推荐
- 也为CSDN Blog加效果
- Windows Phone开发(19):三维透视效果 转:http://blog.csdn.net/tcjiaan/article/details/7388873
- [导入]也为CSDN Blog加效果
- 也为CSDN Blog加效果
- 按回车实现点击某按钮的效果 http://blog.csdn.net/jjzaihaozhe/archive/2007/08/18/1749635.aspx
- Spring+mongodb集群集成(吐血教程) 转自:http://blog.csdn.net/qq_16497617/article/details/52817335
- 32位Win7下安装与配置PHP环境(三) 转自.http://blog.csdn.net/yousuosi
- Windows消息产生的时机 http://blog.csdn.net/Free_Sword/archive/2006/05/07/711158.aspx
- http://blog.csdn.net/redraiment/archi...
- 转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/11952435 相信大多数朋友对Service这个名词都不会陌生,没错,一个老练的
- 英语学习 - 之听力提高 (网址收集)http://blog.csdn.net/Mobidogs/archive/2007/11/03/1864551.aspx
- http://blog.csdn.net/v_july_v/article/details/6015165
- (转载自http://blog.csdn.net/xiaowei_cqu) opencv特征检测器 FeatureDetector
- Android的布局和Intent笔记和常用实例 (转自http://blog.csdn.net/yiyaaixuexi/article/details/6337760)
- fastjson的使用(转自:http://blog.csdn.net/wx_962464/article/details/37612861)
- asp.net 打印02-guoyz_1【http://blog.csdn.net/guoyz_1 】
- 45[http://write.blog.csdn.net/postedit]2145[http://135154]47
- 测试我的BLOG on CSDN
- 身份认证系统 JOSSO Single Sign-On 1.2 简介 (http://blog.csdn.net/accesine960)
- Windows live writer的CSDN blog 设置