js打造自动换肤系统

最新推荐文章于 2024-06-01 20:41:20 发布

北湫

最新推荐文章于 2024-06-01 20:41:20 发布

阅读量770

点赞数

分类专栏： JavaScript 文章标签： javascript 图片百度

本文链接：https://blog.csdn.net/qq_38571398/article/details/78757510

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

 
 需求：根据系统时间自动切换图片。 

 
 思路：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>

 
 由于图片过大，无法上传，无法展示效果，请见谅。 

北湫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js打造自动换肤系统

需求：根据系统时间自动切换图片。思路：1.模仿百度的换肤系统2.根据系统的时间进行换图片3.准备6张图片进行切换,根据时间不同切换不同的图片，每隔10秒切换一次图片4.写一个定时器类，每秒执行一次，然后获取系统时间返回到页面上，从而实现时间在走动的效果5.把根据时间切换图片封装起来，并在定义器中调用，每秒调用一次这个函数，实现到了一定的时间可以切换图片
复制链接

扫一扫