1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>倒计时 天 小时 分钟 秒钟 </title> 7 <style> 8 .wrapper { 9 width: 640px; 10 } 11 .wrapper .title { 12 height: 50px; 13 line-height: 50px; 14 font-weight: bold; 15 } 16 .wrapper .content { 17 width: 640px; 18 } 19 .wrapper .content ul { 20 padding: 0; 21 margin: 0; 22 list-style: none; 23 } 24 .wrapper .content ul li { 25 float: left; 26 font-size: 0px; 27 line-height: 50px; 28 margin: 0 2px; 29 } 30 .wrapper .content ul li b { 31 font-size: 20px; 32 } 33 .wrapper .content ul li span { 34 display: inline-block; 35 width: 50px; 36 height: 50px; 37 border: 1px solid #000; 38 text-align: center; 39 line-height: 50px; 40 font-size: 18px; 41 margin-left: -1px; 42 } 43 </style> 44 </head> 45 <body> 46 47 <div class="wrapper"> 48 <div class="title">秒杀活动 ---- 剩余 xx 天 xx 小时 xx分钟 xx 秒钟 </div> 49 <div class="content"> 50 <ul> 51 <!-- 天数 --> 52 <li> <span>0</span> <span>0</span></li> 53 <!-- : --> 54 <li> <b>:</b> </li> 55 <!-- 小时 --> 56 <li> <span>0</span> <span>0</span></li> 57 <!-- : --> 58 <li><b>:</b></li> 59 <!-- 分钟 --> 60 <li> <span>0</span> <span>0</span></li> 61 <!-- : --> 62 <li><b>:</b></li> 63 <!-- 秒钟 --> 64 <li> <span>0</span> <span>0</span></li> 65 </ul> 66 </div> 67 </div> 68 </body> 69 </html>
1 <script> 2 // 功能：倒计时 3 // 秒杀活动 / 抢红包 / 高考倒计时 4 // 假设 5 // 剩余的时间是 2 * 24 * 60 * 60 * 1000 6 7 8 9 // 步骤： 10 // 1.0 获取所有的span标签 11 var span_elements = document.querySelectorAll(".content ul li span"); 12 // console.log(span_elements); 13 14 // 2.0 定义剩余时间 15 var ms = 2 * 24 * 60 * 60 * 1000; // 2天 16 // var ms = 60 * 60 * 1000;// 1个小时 17 // var ms = 60 * 1000;//1分钟 18 // var ms = 10 * 1000;//10秒 19 20 // 距离07-04凌晨还有多久（自定义时间） 21 // var endTime = (new Date("2020/07/04/00:00:00")).getTime();//7月4号凌晨的时间戳 22 // var nowTime = (new Date()).getTime();//现在的时间戳 23 // var ms = endTime - nowTime; // 相减得到两段时间的时间戳 24 25 // 3.0 定义定时器函数 26 var timer = null ; 27 28 // 4.0 格式化时间 29 function formatime(seconds) { // 形参 seconds 毫秒 30 // .0 定义 天， 时， 分， 秒 31 var d , h , m , s ; 32 // .0 多少天 33 d = seconds / 60 / 60 / 24 ; 34 // .0 剩余的小时 （去掉天数部分的时间） 35 h = seconds / 60 / 60 % 24 ; 36 // .0 剩余的分钟 (去掉小时部分的秒数除于60 得到才是才是才是分钟) 37 m = seconds % 3600 / 60 ; 38 // .0 剩余的秒 39 s = seconds % 60 ; 40 41 42 // 向下取整 43 d = Math.floor(d); 44 h = Math.floor(h); 45 m = Math.floor(m); 46 s = Math.floor(s); 47 48 // 处理时间的十位数 和 个位数 49 50 // 天数 51 span_elements[0].innerHTML = Math.floor( d / 10 ); 52 span_elements[1].innerHTML = d % 10 ; 53 54 // 小时 55 span_elements[2].innerHTML = Math.floor( h / 10 ); 56 span_elements[3].innerHTML = h % 10 ; 57 58 // 分钟 59 span_elements[4].innerHTML = Math.floor( m / 10 ); 60 span_elements[5].innerHTML = m % 10 ; 61 62 // 秒钟 63 span_elements[6].innerHTML = Math.floor( s / 10 ); 64 span_elements[7].innerHTML = s % 10 ; 65 66 console.log(d,h,m,s); 67 } 68 69 // .0 获取秒数 70 var seconds = ms / 1000 ; 71 // 5.0 初始化 72 formatime(seconds); 73 74 // 1 天 = 24 小时 75 // 1 小时 = 60 分钟 76 // 1 分钟 = 60 秒 77 // 1 秒 = 1000 毫秒 78 79 80 // 6.0 执行定时函数 81 timer = setInterval(function(){ 82 // .0 倒计时,每一秒都减一 83 seconds -- ; 84 // .0 判断 85 if(seconds < 0 ) return ; 86 // .0 调用格式化时间的方法 87 formatime(seconds); 88 },1000) 89 90 91 </script>
原文：https://www.cnblogs.com/Aiqizai/p/13334830.html