学习写了一个新年倒计时-＞jQuery+CSS+Html

逛着逛着发现了一位博主写的新年快乐倒计时 原博在

Html+Css+js实现春节倒计时效果（移动端和PC端）_geyaoisnice的博客-CSDN博客html+css+js实现春节倒计时效果 喜欢的朋友一键三连呀https://blog.csdn.net/geyaoisnice/article/details/122460313?utm_medium=distribute.pc_category.none-task-blog-hot-10.nonecase&depth_1-utm_source=distribute.pc_category.none-task-blog-hot-10.nonecase非常羡慕，模仿着大概效果，写了一个有点拉的新年倒计时 源码在最下面

分析一下页面：

    主要有图片背景自动切换和时间倒计时 两个主要功能需要实现，解决里这俩，其余的也就很顺手了。

一、图片自动切换（轮播图）

这里采用定时器，更改盒子背景图片，来实现背景自动切换

使用到了setInterval()定时器

关于如何盒子充满屏幕，涉及到窗口自适应，这里还没学好，简单利用css，使div充满屏幕

width: 100%;
height: 100%;
position: absolute;

二、倒计时的实现

我就是个大拉货，倒计时如何实现从别处学习过来的，照着写了一下，能实现，还挺好使，这里分析一下思路

1.获取当前时间与结束时间的毫秒数，通过毫秒数做运算，获取出倒计天、时、分、秒

2.拿到值以后将其绑定到标签上

3.利用定时器 每秒执行一次 获取最新值

实现的难点在如何用秒的运算得出正确的天、时、分、秒

这里得自己理解理解

下面是如何实现倒计时的网页

https://www.jb51.net/article/98921.htmhttps://www.jb51.net/article/98921.htm最最后附上源码

index.html

	
		
		
		
		
		
	
	
		

			

				
			
			

				
春节倒计时
				
2022
				

					

						

						
天
					
					

						

						
时
					
					

						

						
分
					
					

						

						
秒
					
					
				
			
		
	

style.css

*,div,img{
	padding:0;
	margin:0;
}

.out{
	/* 以下三行实现div充满屏幕 */
	width: 100%;
	height: 100%;
	position: absolute;
}
.bj{
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-image: url(../img/bkg01.jpg);
	background-size: 100% 100%;
}
.content{
	width: 400px;
	height: 500px;
	color:white;
	/* 此盒子垂直居中 */
	position: absolute;
	top: calc(50% - 250px);
	left: calc(50% - 200px);
	/* 子元素垂直居中 */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.content_top{
	letter-spacing: 5px;
}
.content_center{
	letter-spacing: 5px;
	font-size: 70px;
	font-weight: bold;
	
}
.content_bottom{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 250px;
	height: 200px;
}

.content_bottom_day{
	width:50px;
	height: 80px;
	border-radius: 4px;
}

.content_bottom_day_top{
	font-size: 18px;
	min-width: 50px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	background-color: #000000;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}

.content_bottom_day_bottom{
	font-size: 14px;
	min-width: 50px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	background-color: rgb(176, 0, 0);
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
}

彩花附上背景图片呀（图片从百度来的，侵权删呀）