html动画部分

鼠标悬浮动画效果，实现一个国庆的倒计时：

看下效果：

<!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);

猜你喜欢