标签: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