2008/01/21 | 博客顶图随时变
类别(杂记) | 评论(32) | 阅读(1318) | 发表于 12:39

希望变化博客顶图玩的同仁不妨继续往下看。

随时间变化自动换博客顶图,

办法虽笨些,

不过效果还算不错。

我的办法如下:




第一步:

制作不同时段想要展示的顶图(务必把握好大小)。

上传图片。如您比雷公还辛苦可以做成gif或flash呵~

第二步:

删除模板中顶图部分的代码(见红色框内) (请务必事前做好模板代码备份) (单击图片看大图)

第三步:

在顶部信息中加入如下代码,将图片地址(绿色部分)替换好。提交。

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
datetoday = new Date();
timenow=datetoday.getTime();
datetoday.setTime(timenow);
hr = datetoday.getHours();
if (( hr >= 5 ) && (hr <= 7 )) display = "<img src='http://art.5d.cn/SArts/2008-01/14265811650.jpg'>";
if (( hr >= 7 ) && (hr <= 8 )) display = "<img src='http://art.5d.cn/SArts/2008-01/14265811651.jpg'>";
if (( hr >= 8 ) && (hr <= 9 )) display = "<img src='http://art.5d.cn/SArts/2008-01/14265811652.jpg'>";
if (( hr >= 9 ) && (hr <= 11 )) display = "<img src='http://art.5d.cn/SArts/2008-01/14265811653.jpg'>";
if (( hr >= 11 ) && (hr <= 14 )) display = "<img src='http://art.5d.cn/SArts/2008-01/6631411650.jpg'>";
if (( hr >= 14 ) && (hr <= 16 )) display = "<img src='http://art.5d.cn/SArts/2008-01/14265811654.jpg'>";
if (( hr >= 16 ) && (hr <= 17 )) display = "<img src='http://art.5d.cn/SArts/2008-01/14265811656.jpg'>";
if (( hr >= 17 ) && (hr <= 18 )) display = "<img src='http://art.5d.cn/SArts/2008-01/14265811655.jpg'>";
if (( hr >= 18 ) && (hr <= 19 )) display = "<img src='http://art.5d.cn/SArts/2008-01/14265811657.jpg'>";
if (( hr >= 19 ) && (hr <= 21 )) display = "<img src='http://art.5d.cn/SArts/2008-01/14265811658.jpg'>";
if (( hr >= 21 ) && (hr <= 23 )) display = "<img src='http://art.5d.cn/SArts/2008-01/14265811659.jpg'>";
if (( hr >= 23 ) && (hr <= 0 )) display = "<img src='http://art.5d.cn/SArts/2008-01/142658116510.jpg'>";
if (( hr >= 0 ) && (hr <= 5 )) display = "<img src='http://art.5d.cn/SArts/2008-01/142658116511.jpg'>";
var picture = (display);
document.write(picture);
//  End --></script>

另外:

如果完成后博客底部图显示错位(我目前不知到原因),请删除模板代码中底图地址部分(第二步图例中蓝色部分),在底部信息代码中加入引用图片的代码,将原底部图片的地址加入即可。

美中不足:

改变后的顶图、底图已不再是背景图属性了(此处期待高手支招),要加在图上文字,目前还要费些功夫。

----------------------

附送:

雷公顶图下的自动年龄提示与问候语代码,这里已直接加入到第三步的代码后。效果~~:

自动年龄提示代码:

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function HowLongSince(startmonth, startdate, startyear) {
sdate=startdate;
smonth=startmonth-1;
syear=startyear;
var DaysInMonth = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
today = new Date()
var thisyear = today.getFullYear();
var thismonth = today.getMonth();
var thisdate = today.getDate();
mstart = new Date(syear,(smonth==12?1:smonth+1),1);
days1 = (mstart - new Date(syear,smonth,sdate))/(24*60*60*1000)-1;
mend = new Date(thisyear,thismonth,1);
days2 = (new Date(thisyear,thismonth,thisdate) - mend)/(24*60*60*1000)+1;
dayst = days1 + days2;
if (dayst >= DaysInMonth[smonth])  {
AddOneMonth = 1;
dayst -= DaysInMonth[smonth];
}
else AddOneMonth = 0;
ydiff1 = thisyear-mstart.getFullYear();
mdiff1 = thismonth-mstart.getMonth()+AddOneMonth;
if (mdiff1 >11) { mdiff1=0; ydiff1++; }
if (mdiff1 < 0) { mdiff1 = mdiff1 + 12; ydiff1--; }
temp = (ydiff1==0?"":(ydiff1==1?ydiff1+" 岁 ":ydiff1 + " 岁"));
temp += (mdiff1==0?"零":(mdiff1==1?mdiff1+" 个月零":mdiff1+" 个月零"));
temp += (dayst==0?"0天啦":(dayst==1 ? " 1 天啦" : dayst + " 天啦" ));
return temp;
}
//  End --></script><SCRIPT LANGUAGE="JavaScript">
<!-- Begin
document.write("<font color=#808080>");
document.write("  号外:九九");
document.write(HowLongSince(07,26,2004));
// this is the date your site was created.  day,month,year
document.write("</font>");
// End --></script>

自动问候语代码:

<SCRIPT language=JavaScript>
var mess1="";
document.write("<font color='#808080'>")
day = new Date( )
hr = day.getHours( )
if (( hr >= 0 ) && (hr <= 5 ))
mess1="  深夜了,注意身体,该休息了,白天再做吧!"
if (( hr >= 5 ) && (hr < 7))
mess1="  清晨好,您好勤劳啊!这麽早就上网? "
if (( hr >= 7 ) && (hr < 9))
mess1="  早上好,一天之际在于晨,又是美好的一天!"
if (( hr >= 9 ) && (hr < 12))
mess1="  上午好,辛苦的工作中,别忘了锻炼一下身体!"
if (( hr >= 12) && (hr <= 13))
mess1="  该吃午饭啦!您有中午休息的好习惯吗?"
if (( hr >= 13) && (hr <= 17))
mess1="  下午好!天气还好吧?祝您一切顺利。"
if (( hr >= 17) && (hr <= 18))
mess1="  太阳落山了!快看看夕阳吧!如果下雨,别忘打伞 ^_^"
if (( hr >= 18) && (hr <= 20))
mess1="  您吃了吗?今天的心情怎么样,感觉还不错吧!"
if (( hr >= 20) && (hr <= 22))
mess1="  晚上好,勤劳的“小蜜蜂”,我还以为你去玩游戏了:P"
if (( hr >= 22) && (hr <= 23))
mess1="  这么晚了,还要上网?洗洗睡吧!!"
document.write(mess1)
document.write("</font>")
</script>

小提示:

            监测到底变不变。方法1:每隔半个时辰打开雷公博客一次(推荐喜欢 );方法2:修改电脑时间后刷新页面(不推荐哭)。

            可以设定为特定日期的变化,要求读取年、月即可。

            可以要求模板配色与顶图一起变,哈哈~算寒假作业了~

###############################################

快乐猫的倾心指导

将顶图分为两部分,

上面部分为变化图案;

下面部分为变化文字的固定背景图,

至此,实现了图文一体并变的效果。(见现用顶图)

再次对快乐猫的帮助表示由衷感谢。

代码如下:

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
datetoday = new Date();
timenow=datetoday.getTime();
datetoday.setTime(timenow);
hr = datetoday.getHours();
if (( hr >= 5 ) && (hr <= 7 )) display = "<img src='http://blog.5d.cn/user10/glxcb/upload/2008-01/a未标题-1.jpg'>";
if (( hr >= 7 ) && (hr <= 8 )) display = "<img src='http://blog.5d.cn/user10/glxcb/upload/2008-01/a未标题-2.jpg'>";
if (( hr >= 8 ) && (hr <= 9 )) display = "<img src='http://blog.5d.cn/user10/glxcb/upload/2008-01/a未标题-3.jpg'>";
if (( hr >= 9 ) && (hr <= 11 )) display = "<img src='http://blog.5d.cn/user10/glxcb/upload/2008-01/a未标题-4.jpg'>";
if (( hr >= 11 ) && (hr <= 14 )) display = "<img src='http://blog.5d.cn/user10/glxcb/upload/2008-01/a未标题-5.jpg'>";
if (( hr >= 14 ) && (hr <= 16 )) display = "<img src='http://blog.5d.cn/user10/glxcb/upload/2008-01/a未标题-6.jpg'>";
if (( hr >= 17 ) && (hr <= 19 )) display = "<img src='http://blog.5d.cn/user10/glxcb/upload/2008-01/a未标题-7.jpg'>";
if (( hr >= 19 ) && (hr <= 20 )) display = "<img src='http://blog.5d.cn/user10/glxcb/upload/2008-01/a未标题-8.jpg'>";
if (( hr >= 20 ) && (hr <= 21 )) display = "<img src='http://blog.5d.cn/user10/glxcb/upload/2008-01/a未标题-9.jpg'>";
if (( hr >= 21 ) && (hr <= 23 )) display = "<img src='http://blog.5d.cn/user10/glxcb/upload/2008-01/a未标题-10.jpg'>";
if (( hr >= 23 ) && (hr <= 0 )) display = "<img src='http://blog.5d.cn/user10/glxcb/upload/2008-01/a未标题-11.jpg'>";
if (( hr >= 0 ) && (hr <= 5 )) display = "<img src='http://blog.5d.cn/user10/glxcb/upload/2008-01/a未标题-12.jpg'>";
var picture = (display);
document.write(picture);
//  End --></script>
<table style="WIDTH: 760px; HEIGHT: 25px" bgcolor="#ffffff" background="http://blog.5d.cn/user10/glxcb/upload/2008-01/文字底.jpg" border="0">
    <tbody>
        <tr>
            <td><SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function HowLongSince(startmonth, startdate, startyear) {
sdate=startdate;
smonth=startmonth-1;
syear=startyear;
var DaysInMonth = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
today = new Date()
var thisyear = today.getFullYear();
var thismonth = today.getMonth();
var thisdate = today.getDate();
mstart = new Date(syear,(smonth==12?1:smonth+1),1);
days1 = (mstart - new Date(syear,smonth,sdate))/(24*60*60*1000)-1;
mend = new Date(thisyear,thismonth,1);
days2 = (new Date(thisyear,thismonth,thisdate) - mend)/(24*60*60*1000)+1;
dayst = days1 + days2;
if (dayst >= DaysInMonth[smonth])  {
AddOneMonth = 1;
dayst -= DaysInMonth[smonth];
}
else AddOneMonth = 0;
ydiff1 = thisyear-mstart.getFullYear();
mdiff1 = thismonth-mstart.getMonth()+AddOneMonth;
if (mdiff1 >11) { mdiff1=0; ydiff1++; }
if (mdiff1 < 0) { mdiff1 = mdiff1 + 12; ydiff1--; }
temp = (ydiff1==0?"":(ydiff1==1?ydiff1+" 岁 ":ydiff1 + " 岁"));
temp += (mdiff1==0?"零":(mdiff1==1?mdiff1+" 个月零":mdiff1+" 个月零"));
temp += (dayst==0?"0天啦":(dayst==1 ? " 1 天啦" : dayst + " 天啦" ));
return temp;
}
//  End --></script><SCRIPT LANGUAGE="JavaScript">
<!-- Begin
document.write("<font color=#808080>");
document.write("  号外:九九");
document.write(HowLongSince(07,26,2004));
// this is the date your site was created.  day,month,year
document.write("</font>");
// End --></script><SCRIPT language=JavaScript>
var mess1="";
document.write("<font color='#808080'>")
day = new Date( )
hr = day.getHours( )
if (( hr >= 0 ) && (hr <= 5 ))
mess1="  深夜了,注意身体,该休息了,白天再做吧!"
if (( hr >= 5 ) && (hr < 7))
mess1="  清晨好,您好勤劳啊!这麽早就上网? "
if (( hr >= 7 ) && (hr < 9))
mess1="  早上好,一天之际在于晨,又是美好的一天!"
if (( hr >= 9 ) && (hr < 12))
mess1="  上午好,辛苦的工作中,别忘了锻炼一下身体!"
if (( hr >= 12) && (hr <= 13))
mess1="  该吃午饭啦!您有中午休息的好习惯吗?"
if (( hr >= 13) && (hr <= 17))
mess1="  下午好!天气还好吧?祝您一切顺利。"
if (( hr >= 17) && (hr <= 18))
mess1="  太阳落山了!快看看夕阳吧!如果下雨,别忘打伞 ^_^"
if (( hr >= 18) && (hr <= 20))
mess1="  您吃了吗?今天的心情怎么样,感觉还不错吧!"
if (( hr >= 20) && (hr <= 22))
mess1="  晚上好,勤劳的“小蜜蜂”,我还以为你去玩游戏了:P"
if (( hr >= 22) && (hr <= 23))
mess1="  这么晚了,还要上网?洗洗睡吧!!"
document.write(mess1)
document.write("</font>")
</SCRIPT></td>
        </tr>
    </tbody>
</table>

###############################################

------------------------------

上一篇:戊子尽兴         下一篇:中国吉祥图案集

118

评论Comments(32条)

Jeman
Jeman
2008/2/1 19:12:34
#32
哈哈。雷公还特的PS出这么多张图来,我还以为你真的自己去拍呢!
作者:
其实有心实拍,无奈天寒地冻。
mizuki
mizuki
2008/2/1 18:04:14
#31
这个确实很好很强大。。。
作者:
有5d支持折腾,感觉没有做不到,只有想不到。。
DDcoming
DDcoming
2008/1/30 22:47:00
#30
这么实用,一定要顶!骄傲的笑
作者:
胡乱弄斧~~见笑了汗
快乐猫
快乐猫
2008/1/29 11:06:49
#29
看到雷公终于成功实现顶图问候语啦,恭喜祝贺酷!哭
作者:
呵呵~若非快乐猫支持,我就放弃折腾啦~~:D
雷公
雷公
2008/1/28 14:12:11
#28
由衷感谢快乐猫的热情指导,本顶图已实现了图文一体并变的效果。美中不足的问题得到妥善解决
快乐猫
快乐猫
2008/1/25 8:38:46
#27
雷公是不是你的代码有问题啊?实在不行你用在线编辑器制作个表格,把代码框在里边。表格底色与图片底部同色。
我这两天不在网上开个破会去,你再试试?
作者:
哦~你是说把文字部分底色加黑或加一条固定底图。。那样的确可以。不过我的顶图下边右侧还有变的部分,倒是改改顶图适应要求问题不大。原本希望在一个格内两种形式分上下两层重叠各自变,看来我用代码方式实现有困难,有空再试试。谢谢快乐猫。
与人同乐
与人同乐
2008/1/24 21:27:07
#26
创意那好,只是我好懒呢,o(∩_∩)o...
作者:
积极备战要紧,这个懒些无妨
快乐猫
快乐猫
2008/1/24 15:30:21
#25
雷公看一看还有什么问题?快乐猫愿意帮助5D朋友。
作者:
汗试了,笨啊晕文字还在图片下
快乐猫
快乐猫
2008/1/24 15:27:27
#24
其实还有一个简易办法把任何代码网页特效装入顶部:
在23楼里提供的在线编辑器里有绘表格,一,把图片放入,二图片下留出一空位,把所需代码加入即可,我百试百爽哟。
我们不用学习复杂的代码,只要在正常模式下写两个汉字,在html状态下,找到汉字位置加入你的代码即可。喜欢汗
表格内的汉字底衬呈现颜色的办法是背景颜色里选色即可;
表格颜色可在表格颜色里选色。骄傲的笑
快乐猫
快乐猫
2008/1/24 11:24:25
#23
雷公点击查看具体
附在线编辑器,并可把22楼代码在此运行。内有宽屏做贴代码。
第22楼代码完全可用在线编辑器,我试过一切显示正常:
操作如下:在线编辑器正常模式下在图片位置打出两汉字,回到html状态,在两汉字之间加入你需要的代码,如果流动文字过长可减量
喜欢
<< 1234 >>

发表留言post

用 户Name:
密 码Password:
内 容Comment:
http://www.5d.cn/images/size_down.gif http://www.5d.cn/images/size_up.gif
验 证Verify:
日志分类
首页[320]
雷公[28]
九九[59]
杂记[57]
收藏[51]
休闲吧[24]
咚咚匣子[12]
好东西[89]