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

目录

一、基础知识

1.倒计时

①JavaScript Date对象

②HTML DOM 元素对象

③Window setInterval() 方法

2.背景切换

①背景样式设置

②动画

③淡入淡出实现

二、代码实现

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

一、基础知识

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.com)https://www.runoob.com/jsref/jsref-obj-date.htmlJavaScript Date 参考手册 (w3school.com.cn)https://www.w3school.com.cn/jsref/jsref_obj_date.asp等其他参考内容），本例主要使用getTime()方法。

②HTML DOM 元素对象

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

<

element.dir	设置或返回一个元素中的文本方向
element.firstChild	返回元素的第一个子节点
element.focus()	设置文档或元素获取焦点
element.innerHTML