js实现网页七天背景(每日自动更换)

直接上代码,通过以下js代码可以在一个星期内每天都自动更换不同的网页背景图片。

1
2
3
4
5
6
7
<!-- 七天背景 -->
        <script type="text/javascript">
			var week = new Date().getDay(); //返回值是 0(周日) 到 6(周六)
			window.onload = function() {
			    document.getElementById('demo').style.backgroundImage = 'url(bg/'+week+'.jpg)';
			}
		</script>

代码详解

用JavaScript获取星期,再通过返回值获取对应图片作为网页背景,代码中“demo”为要设置背景的id属性,“url(bg/’+week+’.jpg)”获取要显示的图片,在网页同目录下新建bg文件夹,放置七张背景图片,修改名称为0.jpg、1.jpg,2.jpg…..6.jpg
其中0.jpg为星期天显示的背景,依次类推。
WordPress说明:
WordPress站点需要在主题目录下新建bg文件夹,放入七张背景图片,再通过获取主题目录来获取图片url
以下代码返回当前主题根目录

1
<?php bloginfo('template_url'); ?>

所以修改后的js为:

1
2
3
4
5
6
7
<!-- 七天背景 -->
        <script type="text/javascript">
			var week = new Date().getDay(); //返回值是 0(周日) 到 6(周六)
			window.onload = function() {
			    document.getElementById('demo').style.backgroundImage = 'url(<?php bloginfo('template_url'); ?>bg/'+week+'.jpg)';
			}
		</script>

发表一条评论:

电子邮件地址不会被公开。 必填项已用*标注