<!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> div { margin: 200px; } span { display: inline-block; width: 40px; height: 40px; background-color: #333; font-size: 20px; color: #fff; text-align: center; line-height: 40px; } </style> </head> <body> <div> <span class="hour">1</span> <span class="minute">2</span> <span class="second">3</span> </div> <script> var hour = document.querySelector('.hour'); //小时的黑色盒子 var minute = document.querySelector('.minute'); //分钟的黑色盒子 var second = document.querySelector('.second'); //秒数的黑色盒子 var inputtime = +new Date('2019-9-8'); //未来毫秒数 counttime(); setInterval(counttime, 1000); //这个时候时间是每隔一秒改变的 function counttime() { //这个时间是不动的 var time1 = +new Date(); //当前毫秒数 var time = (inputtime - time1) / 1000; // 差值/1000=秒; var h = parseInt(time / 60 / 60); //时 因为没有天数，所以不用%24 h = h < 10 ? '0' + h : h; hour.innerHTML = h; var m = parseInt(time / 60 % 60); m = m < 10 ? '0' + m : m; minute.innerHTML = m; var s = parseInt(time % 60); s = s < 10 ? '0' + s : s; second.innerHTML = s; } </script> </body> </html>