Javascript 实现背景定时自动更换
我越来越发现实践出真知这句话是真理,原本我对 Javascript 是一窍不通的,但是今天居然也被我写出了一个还算有用的脚本,可能很多前辈都已经写过了,也可能在大虾们看来是小儿科,不过因为是我第一个亲自写出来的脚本,还是相当得意的。处女脚本写在博客上,留作纪念。
先介绍一个这段 Javascript 的始末,陈小黑小盆友让我帮忙做款主题,看设计的相当不错,不做就可惜了,于是做着玩玩,布局倒是没花我多少时间,就是要求根据不同时间自动更换主题背景的效果让我楞了一下下。百度娘这回不知道了,只好自己动手写脚本,凭着对 PHP 的一点点基础踉踉跄跄算是写出了 Javascript。效果就是,可以根据本地系统时间,判断早上、下午、晚上,并且分别显示对应的背景图片。
因为主题未完成,也未经小黑童鞋同意,不便公布,我就只把背景部分截出来作为 DEMO(点击查看)。代码如下:
<script type="text/javascript">
function sitebg() {
var d = new Date();
var hour = d.getHours();
if (hour > 4 && hour <= 12) {
document.getElementById('header').style.background = "url('images/header_1.jpg')";
document.body.style.background = "url('images/headerbg_1.png') repeat-x scroll 0 10px #EFEFEF"
} else if (hour > 12 && hour <= 18) {
document.getElementById('header').style.background = "url('images/header_2.jpg')";
document.body.style.background = "url('images/headerbg_2.png') repeat-x scroll 0 10px #EFEFEF"
} else {
document.getElementById('header').style.background = "url('images/header_3.jpg')";
document.body.style.background = "url('images/headerbg_3.png') repeat-x scroll 0 10px #EFEFEF"
}
}
</script>
function sitebg() {
var d = new Date();
var hour = d.getHours();
if (hour > 4 && hour <= 12) {
document.getElementById('header').style.background = "url('images/header_1.jpg')";
document.body.style.background = "url('images/headerbg_1.png') repeat-x scroll 0 10px #EFEFEF"
} else if (hour > 12 && hour <= 18) {
document.getElementById('header').style.background = "url('images/header_2.jpg')";
document.body.style.background = "url('images/headerbg_2.png') repeat-x scroll 0 10px #EFEFEF"
} else {
document.getElementById('header').style.background = "url('images/header_3.jpg')";
document.body.style.background = "url('images/headerbg_3.png') repeat-x scroll 0 10px #EFEFEF"
}
}
</script>
然后在 body 标签里加上 onload="sitebg()" 召唤以上脚本:
<body onload="sitebg()">
写出来再自己看看才发现,原来也不过如此,并不难嘛。根据我的设置,从早上5点到中午12点显示图片1,下午13点到下午18点显示图片2,晚上19点到第二天早上4点显示图片3。为了能看到这个 DEMO,童鞋们不用傻等几个小时来看背景图片的更换,只需要调整计算机系统时间就可以看到早中晚三张背景图片的切换了。
与
Javascript,博客
相关的文章-
原生 Javascript 版自动化焦点图2012年03月9日 -
辗转三国的巧克力2012年02月19日 -
2011 年终总结2011年12月29日 -
Google 赐予我的意外惊喜2011年11月10日
我是说定期更换表格理的背景图片!!!!!
请问,随机更换背景图片的JS咋弄??
恩效果还不错,我有个问题,如果是12小时制的,你的代码怎么实现
系统时间不会是12小时制啊
这个脚本不错啊。你自己写的?
先介绍一个这段 Javascript 的始末,陈小黑小盆友让我帮忙做款主题,看设计的相当不错,不做就可惜了,于是做着玩玩,布局倒是没花我多少时间,
不错不错~借鉴学习~
同学习
这个东西非常的好玩,
谢谢,博主分享!
这个东西倒是不错啊!
不知道会不会影响打开网页速度!
哈~ 这个脚本被你写出来了,有天赋啊~
谢谢啊,原理比较简单,但是花了我不少时间才写出来
好高级啊
跟动画片似的
哈哈。
确实很高级
万戈更新还是那么勤快。
必须的,不能落后呀,嘿嘿
囧,只需要调整计算机系统时间 ~ 好蛋疼 ~
你调不调,你调不调
不调,不调,就是不调。
请教一下代码高手,有没办法实现首页显示的文章数量和分页的数量不一样,比如我想在首页显示5篇文章(因为首页还有其他东西,所以就让它文章数少点),但是在分页下显示8篇文章??
query_posts('showposts=5');
这种方法试过,结果是分页也是5篇文章了
正好需要,话说php的我经常判断时间后载入不同css解决了,js的感觉没有php的效率高吧.任平生大哥也写过类似的
PHP的我今天刚写过,呵呵
好专业的东东啊。。。
按照万戈经常说的 ,时间长了就会了
呵呵,期待你的正式版~
这个可以衍生出好多小功能呢..
以后等你出品自己的主题时·一定捧场·哈哈
谢谢啊,呵呵,很快就会有滴
持续关注·等待惊喜
哥..你太神了
只是一小段代码而已,神不到哪里去,呵呵
=o= 我需要判断天气…… 拉拉…… 回头我改改……
呃,我是技术盲。。。
同技术盲
這個效果真的挺棒的,給你鼓掌
再看了一下代碼,也不難理解運作方式,萬戈真的越來越強了啊~
谢谢啊,你每次都是来鼓励我的,嘿嘿
因為我自己技術不夠,所以只要看到萬戈折騰出來技術代碼,就覺得很厲害啊
这个到是很不错,不过会不会很耗资源
应该不会吧,代码不是很长啊
楼主好强大哦
这么强大啊!
既然是demo嘛,应该2秒自动换下,哈哈 :)以前对asp满熟悉。
我一直想要这个来着 嘿嘿,自己又懒得写,
难道万总知道我要 就写了个出来了
早知道写好卖给你
我只是想要其中的时间判断而已嘛=.=
老七那个是随机变换,你这个是时间段变换。。。你们都比较无聊哇,整啊整,整wordpress
有点意思啊
是很有意思的说
JS很强大
好像还不能切换啊 还在加工吧
可以切换啊,需要调整系统时间才能看到
原来如此
使用JS来控制CSS虽然很简便,但是有一个问题就是对主题做部分修改时也需要修改JS 不知道能不能找到更好的方法来实现
呵呵 用jquery吧
已经改成jQuery的了
哈哈 老佛爷 你不知道吧 阿邙大仙写过类似的文章哦 好像是用一个判断巨型吧 Soga 我记得不太清了!
没有见过耶,不过原理都应该是差不多这样的
插入前排!貌似冰剑博客上的就是这个效果
我用的JQ实现的,不过也是大同小异。
不过JQ可以省下几字节的空间。
我也已经改成JQ的了,嘿嘿
我半夜上,应该提醒我休息的图片换上,哈哈
那要不要提醒“您已经连续灌水xx条,休息一会儿”
学习楼上JQuery的写法
这样的功能还是客户端搞定的好
php输出无延时,客户端的话可能会有个载入切换的过程。。
那如果要记录选择的呢?还是JS方便一些吧。
而且在客户端搞定的事情可以减轻系统的压力 虽然万戈这个算法几乎不占用内存
不过JS毕竟是个脚本语言 呵呵
有cookie啊,两者可以结合起来的
嗯 两者结合时最好的解决办法
呃,看不懂,来盖楼的
俄。。不觉得这个功能用php更好么。。
怎么用PHP呀?我不太会耶
php语法也是很松散的,也可以建一时间对象,获取当前时间,然后和设定时间比较啊。。你可以参考给标题加上new图标等方法。。
JS不是更好吗?PHP的话还要给服务器增加负担,JS的话就在客户端处理。
js处理要只至少下载两张背景图。。。一张默认的和一张判断后下载的。。
你觉得一个函数就给服务器增加了压力?那你页面上就啥也别输出了,<?php the_title(); ?> 你也别写了。。
我的意思是相对来说的。
PHP是服务端语言,JS是客户端语言。
你说哪种方便一些?就拿注册来说,为什么很多网站都要用JS作为第一道验证,而不是直接提交到服务端去验证然后返回?
如果你用PHP直接验证,那么写错了10次,那么就要就要对服务器进行10次访问,然后服务器返回10次信息给你。
如果用JS,你写错100次、1000次,也都只要服务器进行一次访问。
额。。看到你举的例子,我笑的肚子疼了。。我只能说,我不和你争了。。。
说啊,让我也学习学习。。
等着你回复呢,咋半天不说话啊。
没意思。。。
就你说的那个注册验证的例子,标准的都是服务端验证,前台只是为了提高用户体验。。即便如此,前台验证后还是要服务器再验证一遍
是的啊,我说的又没错。
服务端是必要再验证一次,但总比每次都是服务端验证好吧?
客户端验证后,再提交到服务端,基本都是合格的,难道不是减少了压力?
问题在于js效率真的不高,php效率更高
这我就不知道了,我比较喜欢把东西交给客户端先处理一下。
嗯,文本框边的广告明显一点了……那个demo的菜单栏很Vista哦,不错不错~记得Live有几款动态的主题可以根据时间换顶部的图片
很vista....vista啥时候成adj.了
这叫名词当形容词用,活马当死马医……
这个我最早是在腾讯的设计博客上看见的,没想到让你给挖来了
嗯,是Tencent CDC Blog。话说真的好炫,上一段还有人想要这个Theme呢。哪天万戈兄给做出来?
正在做呢,呵呵,不过也就头部和CDC一样
那可就有的期待了
我表示有这个主题提供下载
那可真的就悲剧了。。
http://interjc.net/dev/gbw 这里
jinwen那儿好像也是白天黑夜的换着整的……回来把我的黑色系列改改,整个白昼版本……
。。。只见过他白天的样子耶
找个好的api,根据天气换背景就好玩了
很有创意的想法呀,哪里有这样的API呢
国外见过这类网站,雷雨时页面还有闪电,很酷的效果。方法正在研究中。。
我用php定时替换过,并且前台可以切换,首先cookie控制,其次再是时间点
怎么玩?求教程!比起js,我还是喜欢PHP
那我就去写一篇。。
以前主题用的拿出来展览下
我看到了“单”
??
!!
轮到你来屠版了
那是肯定的,
很多东西做出来后发现原来不是很难
是啊,但是这过程让我想了很久
看到了看到了。。呵呵。等待成品啊..
给小黑的,问小黑公不公布吧
等你设计好了,就去关注他的博客,我就不信他不换上,哈哈
哈哈,果断翻译成JQuery版~~~
能做成JQ的?教教我吧
$('#header').css({'background', xxx);应该是这样
原理基本还是一样的,把getelementsbyid这样的dom方法改成$('#header')这样……好吧我只会评价不会写
$('#header').css({'background', xxx})
打少了个大括号
哈,太好了,这就去试试
$(document).ready(function(){
var $hour = new Date().getHours();
if ($hour > 4 && $hour 12 && $hour <= 18) {
$("#head").addClass("bg_img_2");
} else {
$("#head").addClass("bg_img_3");
}
});
$(document).ready(function(){
var $hour = new Date().getHours();
if ($hour > 4 && $hour 12 && $hour <= 18) {
$("#head").addClass("bg_img_2");
} else {
$("#head").addClass("bg_img_3");
}
});
ooxx泪奔...我发的代码不是这样的....求真相..
小于号<被转义了
<script type="text/javascript">
$(document).ready(function(){
var $hour = new Date().getHours();
if ($hour > 4 && $hour <= 12) {
$("#head").addClass("bg_img_1");
} else if ($hour > 12 && $hour <= 18) {
$("#head").addClass("bg_img_2");
} else {
$("#head").addClass("bg_img_3");
}
});
</script>
拿走了 刚好是我那里需要
老实交代你用再哪了...我看了半天没发现...
还没改呢=.=改了你也发现不鸟 嘿嘿..
- -凸
拿走了
怎么好像不好用呢?难道是我的网速太慢吗?
你更改系统时间了没?
强大啊,改下时间看看……
效果如何呀
这个不是大问题,可以根据你的需要再改
我記得我逛過一外國網站,他的背景圖片是一整天的景象,應該是用jQuery向上不斷重覆移動的~感覺很清新
讓我找到後拿給你看
恩,好呀,我要多参考一些做法
表示看过,就是一超大图片,图片太大,国内这龟速没办法
我也是「國內」耶……可是超有速度說
好吧,如果你的网站能在5s内打开2M以上的图片就算我没说过
前排
对你来说已经是后排啦
只围观,不折腾……简直是代码帝了
我要从PHP向JS发展,哈哈
同围观一下子
嘿嘿DEMO的那只猫很有意境啊
小程序不错 话说万戈的站也来开灯关灯吧
开灯关灯?
应该是手动点击链接切换白天和黑夜的css吧
貌似在Willin大师那看到过背景切换的 不过他的是根据分类换的
willin大师玩的肯定更高级,俺还比不上
个所有长啊
A9不复杂呢,只怕你是个大忙人
这个蛮有用的 貌似老七也是这个方法
对哦,你这么说我想起来了,老是见他换图片,还以为手动的呢
php判断不行吗?
PHP判断怎么把样式加到CSS中?我不会耶
http://kan.willin.org/?p=1318 这篇文章里willin有提到不同分类不同背景,PHP时间我觉得肯定能判断~SO
第一想法,同样判断时间,然后在输出header时输出对应的background的style
囧。。。建几个伪链接改变时间变量的值不就能马上看到效果了。。。
懒得改了,我直接把代码复制上去的,哈哈
刚刚那个时纯抢沙发。
万戈现在越来越强盛了!!!!!!!!
js实现,加个太阳和月亮~~更帅
图片不是我做的,只是借来用用,呵呵
可是有加工吧~
墙
你难得沙发一次呀
沙发一起坐
挤挤sf
挤一挤