也为CSDN Blog加效果

转载 2006年05月27日 11:52:00
虽然开通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的首页看看了。

把内存当硬盘使,让你的linux程序运转如飞(在linux下用firefox在线写csdn的blog再也不卡了)

首先说一下核心的命令:   mount -t tmpfs -o size=1024m tmpfs /mnt/ram 这个命令开了一块1G内存来当目录用。不过放心,如果里面没文件,是不会占用内存的,用...

csdn blog 感兴趣的博客

  • 2008年10月16日 10:20
  • 5KB
  • 下载

IBM网格计算与企业批处理任务架构 http://blog.csdn.net/lifetragedy

一、批处理 我们在一些项目中如:银行、保险、零商业门店系统中的对帐、结帐、核算、日结等操作中经常会碰到一些"批处理“作业。 这些批处理经常会涉及到一些大数据处理,同...

webpack+vue+vue-router创建项目具体(备注:供自己学习时以备随时可以查看用而整理,首发地址:http://blog.csdn.net/fungleo/article/detail)

1 安装好nodejs 之后=>输入命令node -v,有版本号出来说明npm也已经安装好 2 vue-cil是vue的脚手架工具  npm install -g vue-cli ,...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:也为CSDN Blog加效果
举报原因:
原因补充:

(最多只允许输入30个字)