- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 倒计时 </title>
- </head>
- <body>
- <center > 距离出发还有 </center>
- <div id="mybox"></div>
- <style type="text/CSS">
- #mybox{
- font-size: 40px;
- text-align: center;
- padding: 20px 0;
- }
- #mybox em{
- font-size: 20px;
- font-style: normal;
- padding-right: 10px;
- letter-spacing: 3px;
- }
- </style>
- <script type="text/javascript">
- {
- let formate = (n)=>{
- return n<10?"0"+n:n;
- }
- let myTime = new Date("2018-6-2 9:0:0"); //2008-8-8 和 2008/8/8 两种日期格式 补零也可以
- let countDown = () => {
- let nowTime = new Date();
- if(myTime-nowTime <0){
- clearInterval(myInt);
- document.querySelector('#mybox').innerHTML = "出发啦!";
- return false;
- }
- //let myDay = parseInt((myTime-nowTime)/1000/60/60/24); // 天
- //let myHour = parseInt((myTime-nowTime)/1000/60/60 % 24); // 计算天数 还剩多少小时
- let myHour = formate(parseInt((myTime-nowTime)/1000/60/60)); // 不计算天数 一共多少小时
- let myMinutes = formate(parseInt((myTime-nowTime)/1000/60 % 60)); // 分
- let mySeconds = formate(parseInt((myTime-nowTime)/1000 % 60)); // 秒
- document.querySelector('#mybox').innerHTML = myHour + "<em > 小时 </em>" + myMinutes + "<em > 分 </em>" + mySeconds + "<em > 秒 </em>";
- }
- let myInt = setInterval(countDown,1000);
- countDown();
- }
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/18483/b85919bfe0920189c712413e89c8fc3b.html