目录
一、基础知识
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)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实现倒计时、背景切换
发布评论