需求:根据系统时间自动切换图片。
思路:1.模仿百度的换肤系统
2.根据系统的时间进行换图片
3.准备6张图片进行切换,根据时间不同切换不同的图片,每隔10秒切换一次图片
4.写一个定时器类,每秒执行一次,然后获取系统时间返回到页面上,从而实现时间在走动的效果
5.把根据时间切换图片封装起来,并在定义器中调用,每秒调用一次这个函数,实现到了一定的时间可以切换图片
代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>百度换肤</title>
<style type="text/css">
*{margin:0;padding:0;}
body{font-size:14px;font-family:"微软雅黑";color:#fff;}
html,body{height:100%;}
#bg{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;z-index:-1;}
#timer{height:200px;background:rgba(0,0,0,0);position:relative;top:50%;}
#timer .box{width:200px;height:100px;margin:-24px auto;text-align:center;font-size:48px;}
</style>
</head>
<body>
<div id="bg"></div>
<!--时钟-->
<div id="timer">
<div class="box" id="t"></div>
</div>
<script type="text/javascript">
//定时器,切换背景,1秒执行一次
//获取id
var tdom = document.getElementById("t");
var timer = setInterval(function(){
var d = new Date();
//小时 0~23
var h = d.getHours();
//分钟
var m = d.getMinutes();
//秒
var s = d.getSeconds();
//根据时间的规范,单位数在前面加0占位
/* if(h<10){
h = "0"+h;
}
if(m < 10){
m = "0"+m;
}
if(s < 10){
s = "0"+s;
}
tdom.innerHTML = h+":"+m+":"+s; */
//三目运算符写法
tdom.innerHTML = (h >= 10 ? h:"0"+h)+":"+(m >= 10 ? m:"0"+m)+":"+(s >= 10 ? s:"0"+s);
//调用函数
loadingDate();
},1000);
//把根据时间选择图片封装,并在定时器中调用
function loadingDate(){
var bg = document.getElementById("bg");
var name = null;
//日期函数
var date = new Date();
//秒
var s = date.getSeconds();
//根据时间来判断切换哪张图片
if(s>=0 && s<=9){
name = "1";
}else if(s>=10 && s<=19){
name = "2";
}else if(s>=20 && s<=29){
name = "3";
}else if(s>=30 && s<=39){
name = "4";
}else if(s>=40 && s<=49){
name = "5";
}else{
name = "6";
}
bg.style.backgroundImage = "url('image/"+name+".jpg')";
}
</script>
</body>
</html>
由于图片过大,无法上传,无法展示效果,请见谅。