版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/weixin_38061191/article/details/82083022
鼠标悬浮动画效果,实现一个国庆的倒计时:
看下效果:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.cl1 {
width: 1000px;
background: linear-gradient(#393663, #AB90B1);
}
div {
margin: 0 auto;
width: 460px;
height: 350px;
overflow: hidden;
}
img {
width: 460px;
height: 400px;
}
img:hover {
transition: transform 5s;
transform: scale(1.2);
}
p {
text-align: center;
color: springgreen;
background-color: rgba(0, 0, 0, 0.5);
}
img:hover+p {
transform: translate(0px, -100px);
}
</style>
<script src="js/count_down.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="cl1">
<div id="container">
<img src="img/a.jpg" />
<p><span id="day"></span>天
<span id="Hours"></span>小时
<span id="Minutes"></span>分钟
<span id="Seconds"></span>秒</p>
</div>
</div>
</body>
</html>
js部分(这也是一个国庆倒计时的写法)
思路很简单,用国庆的时间减去当前时间,用Math.floor取整,
time/(1000*60*60)%24
1000*60*60就是一个小时,我们如果用time的时间除以小时,再除以一个的24小时,它的余数就是今天剩下的小时,以此类推
function timeover() {
var National_Day = new Date("2018-10-01 00:00:00");
var current_time = new Date();
var time = National_Day.getTime() - current_time.getTime();
console.info(National_Day + "+++++++" + current_time)
console.info(time)
var day = document.getElementById("day");
day.innerHTML = Math.floor(time / (1000 * 60 * 60 * 24));
var hours = document.getElementById("Hours");
hours.innerHTML = Math.floor(time / 1000 / 60 / 60 % 24);
var Minutes = document.getElementById("Minutes");
Minutes.innerHTML = Math.floor((time / 1000 / 60) % 60)
var Seconds = document.getElementById("Seconds");
Seconds.innerHTML = Math.floor((time / 1000) % 60);
}
setInterval(timeover, 1000);