一、基础知识

1.倒计时

①JavaScript Date对象

我们可以通过var data = new Date();来创建date对象。Date对象的方法有很多，其中包含：

getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒数。
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。

等众多方法（具体内容可见：JavaScript Date 对象 | 菜鸟教程 (runoob)https://www.runoob/jsref/jsref-obj-date.htmlJavaScript Date 参考手册 (w3school)https://www.w3school/jsref/jsref_obj_date.asp等其他参考内容），本例主要使用getTime()方法。

②HTML DOM 元素对象

HTML DOM 对象的方法有很多，包括：

element.dir	设置或返回一个元素中的文本方向
element.firstChild	返回元素的第一个子节点
element.focus()	设置文档或元素获取焦点
element.innerHTML	设置或者返回元素的内容。
element.isContentEditable	如果元素内容可编辑返回 true，否则返回false

等众多方法（具体内容可见：HTML DOM 元素对象 | 菜鸟教程 (runoob)https://www.runoob/jsref/dom-obj-all.html

HTML DOM Element 对象 (w3school)https://www.w3school/jsref/dom_obj_all.asp），在本例中我们在HTML5中创建了存放时间的容器，通过elemen.innerHTML来将相应的内容填充到创建的HTML5的容器中。

③Window setInterval() 方法

setInterval() 方法是可以按照指定的周期（以毫秒计）来调用函数或计算表达式的一种方法。

语法：setInterval(function/code , milliseconds , param1 , param2 , ...) ;

参数解释：function/code就是调用的函数或计算表达式；milliseconds是指定的周期；params1、params2、...是setInterval的其他参数，可有可无。但function/code和milliseconds必须有！

我将setInterval(function/code , milliseconds)方法比作一个手机闹钟，function/code可以理解为是闹钟响时的歌曲（就是说setInterval方法具体执行的内容依据function/code而定），milliseconds可以理解为闹钟的周期（就是setInterval方法多长时间执行一次）。

2.背景切换

①背景样式设置

background-image：设置背景图片。
background-size：指定背景图像的大小，可以指定像素或百分比大小。
background-origin：指定了背景图像的位置区域，其值可以是盒子模型的content-box、padding-box、border-box。
background-clip：指从指定位置开始绘制背景图片，其值可以是盒子模型的content-box、padding-box、border-box。

②动画

创建动画时必须使用@keyframes 规则，@keyframes 规则是创建动画。
在创建动画时，动画必须要绑定到一个选择器上，否则不会有任何效果。
使用动画时，我们必须定义动画的名称和动画的持续时间。如果省略的持续时间，动画将无法运行，因为默认值是0。

动画属性：

animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function	规定动画的速度曲线。默认是 "ease"。
animation-delay	规定动画何时开始。默认是 0。
animation-iteration-count	规定动画被播放的次数。默认是 1。
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。

其他属性见：CSS3 动画 | 菜鸟教程 (runoob)https://www.runoob/css3/css3-animations.htmlCSS 动画 (w3school)https://www.w3school/css/css3_animations.asp

③淡入淡出实现

本例中的图片的淡入淡出是通过动画+不透明度来实现的，实现逻辑如下：在每次切换图片是设置动画效果，将动画效果的开始时（0%）和结束时（100%）的不透明度设置为0（其他数值也可以但注意要在0~1之间），然后随着动画的进程不透明度逐渐增加，当动画进行到一半时图片完全显示，然后继续随着动画的进程不透明度逐渐减小，依次来到达背景淡入淡出的效果。下面是本例中淡入淡出动画不透明度随着动画进程的具体参数：

                0% {opacity: 0.2;}
               10% {opacity: 0.4;}
               20% {opacity: 0.6;}
               30% {opacity: 0.8;}
               40% {opacity: 1;}
               50% {opacity: 1;}
               60% {opacity: 0.8;}
               70% {opacity: 0.6;}
               80% {opacity: 0.4;}
               90% {opacity: 0.2;}
               100% {opacity: 0.1;}

二、代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>倒计时成品</title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			#back{
				width: 1536px;
				height: 720px;
				float: left;
				background-image: url(img/imgs1.jpg);
				background-repeat: no-repeat;
				background-size: 100% 100%;
				animation-name: example;
				animation-duration: 5s;
				animation-iteration-count: infinite;
				position: relative;
				left: 50%;
				margin-left: -768px;
			}
			@keyframes example {
			0%   {opacity: 0;}
			5%   {opacity: 0.5;}
			10%  {opacity: 1;}
			20%  {opacity: 1;}
			30%  {opacity: 1;}
			40%  {opacity: 1;}
			50%  {opacity: 1;}
			60%  {opacity: 1;}
			70%  {opacity: 1;}
			80%  {opacity: 1;}
			90%  {opacity: 1;}
			95%  {opacity: 0.5;}
			100% {opacity: 0;}
			}
			#word{
				width: 340px;
				height: 90px;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-top: -45px;
				margin-left: -170px;
			}
		</style>
	</head>
	<body>
		<div id="back">
		
		<div id="word">
			<h1>距离2021结束还有：</h1>
			<h1>
				<span id="day"></span>天
				<span id="hour"></span>小时
				<span id="minute"></span>分钟
				<span id="second"></span>秒
			</h1>
		</div>
		</div>	
		<script>
			function backImgChange(){
				var num = Math.round((Math.random()*3) + 1);
				document.getElementById('back').style.backgroundImage = 'url(./img/imgs'+num+'.jpg)';
			}
			function nowTime(){
				var currentTime = new Date();
				var targetTime = new Date('Jan 1,2022 00:00:00');
				var differNumSecond = Math.round((targetTime - currentTime)/1000);
				document.getElementById("second").innerHTML = differNumSecond % 60;
				document.getElementById("minute").innerHTML = Math.round((differNumSecond/60)%60);
				document.getElementById("hour").innerHTML = Math.round((differNumSecond/60/60)%24);
				document.getElementById("day").innerHTML = Math.round((differNumSecond/60/60/24)%24);
			}
			setInterval(function(){
				backImgChange();
			},5000)
			setInterval(function(){
				nowTime();
			},1000)
		</script>
	</body>
</html>

**注意啊，这是我的文件目录，当你要直接复制代码使用时，你需要提前配置好自己img里面的图片文件，要不是用不成的！

更多推荐

HTML5、css3、js实现倒计时、背景切换

HTML5、css3、js实现倒计时、背景切换

一、基础知识