文章目录

• 前言
• 一、html代码讲解
• 二、css代码讲解
• 三、js代码讲解
• 四、全部代码
• 五、效果图
• 总结

前言

这个倒计时秒杀效果可以直接拿来用，不需要具备自己能够打出来。当然了，要是能打出来那是最好的，理解代码的意思就可以了。。。重点在于bom的知识点那块，也就是setInterval的使用。下面详细讲解一下吧。

一、html代码讲解

        在做这个时，我们先把京东的图拿过来分析一下。下图是京东的秒杀效果图。主要是一个大的div放背景图。里面有3个小的div。最后一个div里面放3个span标签进行修饰。下面我们来一起做吧！

                        ​​​​​​​        

            按照上面的思路我们写一下代码，这个简单就不多说了。​​​​​​​

 
京东秒杀
24:00点场 距结束
1 : 2 : 3  

二、css代码讲解

        分析

                因为里面的3个小div需要设置所在大盒子的位置。所以我们先设置大div

                        1.设置相对属性

                        2.设置宽高

                        3.设置背景图。(图片自己想做的话去京东下载吧)

        大盒子代码

     .big_box {position: relative;width: 190px;height: 250px;background: url(../../img/jd.png) no-repeat;}

                设置三个小div相同的属性，写在一起。

                        1.相同的颜色

                        2.相同的粗体

                        3.都要调位置

        相同属性代码

     .big_box .box1,.box2,.box3 {color: #FFFFFF;font-weight: 700;position: absolute;}

                设置三个小div的不同属性，div位置，字体大小。

        不同属性代码

     /* div位置，字体大小 */.big_box .box1 {font-size: 30px;top: 30px;left: 32px;}/* div位置，字体大小 */.big_box .box2 {font-size: 18px;top: 164px;left: 24px;}/* div位置，字体大小 */.big_box .box3{font-size: 20px;top: 203px;left: 32px;}

                设置第三个div里面三个span标签的属性

          修饰span代码

     /* span */.hour,.minute,.second {display:inline-block;width: 26px;height: 26px;background-color: #000000;}

三、js代码讲解

               获取span时分秒代码           

                        这里只有第三个div里的3个span标签需要变化，所以获取过来。

     var hour=document.querySelector('.hour');var minute=document.querySelector('.minute');var second=document.querySelector('.second');

                结束时间代码

var inputTime=+new Date('2022-5-3 24:00:00');

                获取时分秒时间并把值放到span里代码

                        这个在我前几篇javascript中Date()内置对象说过，这里就不解释了。

     function countDown(){var nowTime=+new Date();var times=(inputTime-nowTime)/1000;var h=parseInt(times/60/60%24);h=h<10 ? '0'+h:h;hour.innerHTML=h;var m=parseInt(times/60%60);m=m<10 ? '0'+m:m;minute.innerHTML=m;var s=parseInt(times%60);s=s<10 ? '0'+s:s;second.innerHTML=s;}

                隔一秒调用一次函数代码

                        这个就是每秒执行函数获取值不同，显示的也会相应的变化。setInterval（函数名，毫秒数），所以每隔一秒就会执行一次函数。

window.setInterval(countDown,1000);

                注意：防止第一次有空白需在没执行上述的setInterval时先调用一次。

countDown();//先调用一次 防止第一次刷新有空白

四、全部代码

.big_box {position: relative;width: 190px;height: 250px;background: url(../../img/jd.png) no-repeat;}/* 相同的属性 */.big_box .box1,.box2,.box3 {color: #FFFFFF;font-weight: 700;position: absolute;}/* div位置，字体大小 */.big_box .box1 {font-size: 30px;top: 30px;left: 32px;}/* div位置，字体大小 */.big_box .box2 {font-size: 18px;top: 164px;left: 24px;}/* div位置，字体大小 */.big_box .box3{font-size: 20px;top: 203px;left: 32px;}/* span */.hour,.minute,.second {display:inline-block;width: 26px;height: 26px;background-color: #000000;}
京东秒杀
24:00点场 距结束
1 : 2 : 3  
var hour=document.querySelector('.hour');var minute=document.querySelector('.minute');var second=document.querySelector('.second');var inputTime=+new Date('2022-5-3 24:00:00');countDown();//先调用一次 防止第一次刷新有空白window.setInterval(countDown,1000);function countDown(){var nowTime=+new Date();var times=(inputTime-nowTime)/1000;var h=parseInt(times/60/60%24);h=h<10 ? '0'+h:h;hour.innerHTML=h;var m=parseInt(times/60%60);m=m<10 ? '0'+m:m;minute.innerHTML=m;var s=parseInt(times%60);s=s<10 ? '0'+s:s;second.innerHTML=s;}

五、效果图

        ​​​​​​​        ​​​​​​​        ​​​​​​​        

总结

        这个就是倒计时的做法。主要还是练习setInterval知识点的使用。这个还是比较常用的。不过大家还是得先把html和css学会才能更好的掌握js的知识点哦。。。