标签:ice auto 中秋 doctype init 中秋节 date http dev
虽然这个代码很快就“过期”了。不过思路还是可以保留的~~
获取当前和期待的时间的时间戳,求差值,用定时器使时间的变化随时刷新展示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#show {
width: 1000px;
height: 300px;
margin: 50px auto;
font-size: 40px;
background-color: rgb(146, 170, 236);
text-align: center;
color: aliceblue;
}
</style>
</head>
<body>
<div id="show"></div>
<script>
setInterval(function(){
var now = new Date();
var nowMS = now.getTime();
// 获取现在时间并转换为时间戳
var midAutumn = new Date("2019-9-13");
var midAutumnMS = midAutumn.getTime();
// 获取中秋时间,并转换为时间戳
var time = midAutumnMS - nowMS;
var finalTime = new Date(time);
// 算出来中间值转为毫秒数
var month = finalTime.getMonth();
var day = finalTime.getDate();
var hour = finalTime.getHours();
var minutes = finalTime.getMinutes();
var second = finalTime.getSeconds();
// 获取月日时分秒等
var show = document.getElementById("show");
// 获取div
show.innerHTML = "距离中秋还有" + month + "月" + day + "日" + "<br>" + hour + "时" + minutes + "分" +
second + "秒";
// div内容变成所余时间
},1000);
</script>
</body>
</html>
同理,也可以写出来类似的倒计时~~
标签:ice auto 中秋 doctype init 中秋节 date http dev
原文地址:https://www.cnblogs.com/sandraryan/p/11345895.html