<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="seckill"> <div class="seckill-countdown"> <span>距离秒杀开始还有：</span> <span class="countdown-hour">00</span>时 <span class="countdown-minute">00</span>分 <span class="countdown-second">00</span>秒 </div> <button id="seckill-btn" disabled>秒杀</button> </div> </body> <script> // 获取秒杀模块的DOM元素 const seckillEl = document.querySelector('#seckill'); // 设置秒杀开始时间和结束时间（假设秒杀时间为每天10点到11点） const startTime = new Date(); startTime.setHours(13, 0, 0, 0); const endTime = new Date(); endTime.setHours(14, 0, 0, 0); // 计算距离秒杀开始的时间，并更新页面上的倒计时显示 function updateCountdown() { const now = new Date(); let timeLeft; if (now < startTime) { timeLeft = startTime - now; seckillEl.querySelector('.seckill-countdown').innerHTML = ` <span>距离秒杀开始还有：</span> <span class="countdown-hour">${Math.floor(timeLeft / 1000 / 60 / 60)}</span>时 <span class="countdown-minute">${Math.floor(timeLeft / 1000 / 60 % 60)}</span>分 <span class="countdown-second">${Math.floor(timeLeft / 1000 % 60)}</span>秒 `; } else if (now < endTime) { seckillEl.querySelector('.seckill-countdown').textContent = '秒杀进行中'; seckillEl.querySelector('#seckill-btn').removeAttribute('disabled'); } else { seckillEl.querySelector('.seckill-countdown').textContent = '秒杀已结束'; seckillEl.querySelector('#seckill-btn').setAttribute('disabled', true); } } // 每秒钟更新一次倒计时 setInterval(updateCountdown, 1000); </script> </html>