JavaScript实现淘宝京东商品秒杀效果
案例分析
1. 这个倒计时是不断变化的,因此需要定时器来自动变化( setInterval )
2. 三个黑色盒子里面分别存放时分秒
3. 三个黑色盒子利用innerHTML放入计算的小时分钟秒数
4. 第―次执行也是间隔毫秒数,因此刚刷新页面会有空白
5. 最好采取封装函数的方式,这样可以先调用一次这个函数,防止刚开始刷新页面有空白问题
1 div { 2 margin: 200px; 3 } 4 5 span { 6 display: inline-block; 7 width: 40px; 8 height: 40px; 9 background-color: #333; 10 font-size: 20px; 11 color: #fff; 12 text-align: center; 13 line-height: 40px; 14 }
1 <div> 2 <span class="hour">1</span> 3 <span class="minute">2</span> 4 <span class="second">3</span> 5 </div>
1 // 1. 获取元素 2 var hour = document.querySelector('.hour'); // 小时的盒子 3 var minute = document.querySelector('.minute'); // 分钟的盒子 4 var second = document.querySelector('.second'); // 秒数的盒子 5 var inputTime = +new Date('2020-12-5 22:00:00'); // 返回的是用户输入时间总的毫秒数 6 7 countDown(); // 我们先调用一次这个函数,防止第一次刷新页面有空白 8 9 // 2. 开启定时器,每隔一秒 调用一次countDown函数(过1s钟调用 所有用空白效果) 10 setInterval(countDown, 1000); 11 12 function countDown() { 13 var nowTime = +new Date(); // 返回的是当前时间总的毫秒数 14 var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 15 var h = parseInt(times / 60 / 60 % 24); //时 16 h = h < 10 ? '0' + h : h; 17 hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子 18 var m = parseInt(times / 60 % 60); // 分 19 m = m < 10 ? '0' + m : m; 20 minute.innerHTML = m; 21 var s = parseInt(times % 60); // 秒 22 s = s < 10 ? '0' + s : s; 23 second.innerHTML = s; 24 }