静态页面（一）：原生JS模拟京东秒杀专场倒计时

京东秒杀
                
                

                
                

                    00
                    00
                    00
                
            
    

/* 清除默认内外边距 */
*{
    padding: 0;
    margin: 0;
}

/* 设置超链接的样式 */
#countdownLink{
    /* 将其变为块元素之后，设置宽高，宽高和背景图片的大小一致 */
    display: block;
    width: 191px;
    height: 261px;
    /* 设置超链接背景图片，点击图片任何位置都能访问该超链接 */
    background-image: url(//misc.360buyimg.com/mtd/pc/index_2019/1.0.0/assets/img/4a15d8883775742e3efbb850ae14def7.png);
    /* 去掉超链接里文字的下划线 */
    text-decoration: none;
}

/* 设置秒杀框标题的样式 */
#seckill{
    /* 宽度设置为父元素的100%，也就是191px */
    width:100%;
    /* “京东秒杀”字体样式 */
    font-family: "黑体";
    font-weight: bold;
    color:white;
    font-size: 32px;
    /* “京东秒杀”在其所在盒子里居中 */
    text-align: center;
    /* 将京东秒杀的盒子居中,由于宽度是100%，故仅设置上下外边距即可，在这里习惯性加auto*/
    margin: 40px auto;
}

/* 消除#countDownLink和#seckill的垂直外边距重叠 */
#countdownLink::before,
#countdownLink::after{
    content:"";
    display: table;
    clear: both;
}

/* 设置场次字体大小*/
#specialTime{
    /* 宽度设置为父元素的100%，也就是191px */
    width:100%;
    height:20px;
    /* 内容居中 */
    text-align: center;
    /* 字体样式 */
    /* 文字大小设置默认值为15px，后面选择器里会有变动 */
    font-size: 15px;
    color:white;
    font-family: "黑体";
    font-weight: bold;
    /* 设置一个上下外边边距,其中,上外边距会与最上边盒子的下外边距重合一部分 */
    margin: 75px auto 20px;
}

/* JS根据场次信息添加的标签,显示时间,由于时间字体偏大,就单独设置一个p标签 */
#specialTime #strong{
    display: inline-block;
    font-size: 23px;
}
/* JS添加的标签,显示场次信息里的中文,字体偏小 */
#specialTime #nomal{
    display: inline-block;
    /* 继承父元素字体大小 */
    /* 调节根据基线的偏移值,使得场次时间与中文对齐 */
    vertical-align: 3px;
}

/* 设置剩余时间所在盒子的样式 */
#leftTime{
    width: 100%;
    text-align: center;
}

/* 时间子盒子的样式 */
#hour,#minute,#second{
    /* 宽高 */
    width: 30px;
    height: 30px;
    /* 背景 */
    background-color: black;
    /* 字体 */
    color:white;
    font-family: "黑体";
    font-weight: bold;
    font-size:25px;
    /* 文字居中 */
    text-align: center;
    display: inline-block;
    /* 左右外边距*/
    margin:0 5px;
    /* 开启决相对定位 */
    position: relative;
} 

/* 在时和分的后面添加一个： */
#hour::after,#minute::after{
    content: ":";
    position: absolute;
    /* 调一调冒号的位置，使其与数字对齐 */
    left: 32px;
    top: -3px;
}

window.addEventListener("load",function(){
    //设置秒杀专场开始时间基于1970年的毫秒数
    var startTime = +new Date("2020-03-06T17:00:00");
    //设置秒杀专场当天的00:00时基于1970年的毫秒数
    var zeroOclock = +new Date("2020-03-06T00:00:00");
    //将上述两个时间相减，将结果换算成24小时制的时间放在specialTime里显示用于表明多少点的场次
    var h1 = (startTime-zeroOclock)/1000/60/60;
    //若时间为个数，前面补个0
    h1 = h1h1:h1;
    //获取显示场次信息的那个div元素的对象
    var box = document.getElementById("specialTime");
    //在里面添加两个p标签，分别存放时间和描述性中文
    box.innerHTML = "
"+ h1 + ":00
" + "
点场 倒计时
";
    //获取时分秒盒子的对象
    var span = document.getElementsByTagName("span");
    //获取当前时间基于1970年的毫秒数
    var now = +new Date;
    // 如果开场时间未到，则不停地计时
    if((startTime - now)>0){
        cal();
        var countDown = setInterval(cal,1000);    
    }
    
    function cal(){
        // 重新获取当前时间
        now = +new Date();
        // 计算开场时间与现在时间的差
        var leftTime = startTime - now;
        // 分别计算年月日
        var h = parseInt(leftTime/1000/60/60%24);
        h = h  h : h;
        var m = parseInt(leftTime/1000/60%60);
        m = m  m : m;
        var s = parseInt(leftTime/1000%60);
        s = s  s : s;
        // 如果时间到了，则停止计时，时间没到的话，就更新倒计时
        if((h+m+s)!="00000000"){
            span[0].innerHTML = h;
            span[1].innerHTML = m;
            span[2].innerHTML = s;
        }else{
            span[2].innerHTML = s;
            clearInterval(countDown);
        }
    }
})