本文实例为大家分享了JavaScript仿京东秒杀倒计时的具体代码，供大家参考，具体内容如下仿京东秒杀倒计时html代码

css样式代码
*{

margin: 0;

padding: 0;

}

#box{

width: 200px;

height:300px;

margin: 200px 200px;

background: red;

position: relative;

}

.txt{

width: 150px;

height:50px;

text-align: center;

line-height: 50px;

color: #fff;

font-size: 30px;

font-weight: 900;

position: absolute;

left: 25px;

top: 50px;


}

.hour{

left: 20px;

}

.h_m{

left: 68px;

}

.minute{

left: 80px;

}

.m_s{

right: 68px;

}

.second{

left: 140px;



}

.hour,.minute,.second{

position: absolute;

top:200px;

color: #fff;

font-size: 20px;

text-align: center;

line-height: 40px;

width: 40px;

height: 40px;

background: black;

}

.h_m, .m_s{

color: #fff;

font-size: 20px;

font-weight: 900;

position: absolute;

bottom: 70px;

}
*{

margin: 0;

padding: 0;

}

#box{

width: 200px;

height:300px;

margin: 200px 200px;

background: red;

position: relative;

}

.txt{

width: 150px;

height:50px;

text-align: center;

line-height: 50px;

color: #fff;

font-size: 30px;

font-weight: 900;

position: absolute;

left: 25px;

top: 50px;


}

.hour{

left: 20px;

}

.h_m{

left: 68px;

}

.minute{

left: 80px;

}

.m_s{

right: 68px;

}

.second{

left: 140px;



}

.hour,.minute,.second{

position: absolute;

top:200px;

color: #fff;

font-size: 20px;

text-align: center;

line-height: 40px;

width: 40px;

height: 40px;

background: black;

}

.h_m, .m_s{

color: #fff;

font-size: 20px;

font-weight: 900;

position: absolute;

bottom: 70px;

}js调用函数倒计时代码
//1、获取元素
var hour=document.querySelector('.hour');
var minute=document.querySelector('.minute');
var second=document.querySelector('.second');
var inputTime=+new Date('2021-3-11 20:00:00');//倒计时的结束时间，自己设置时间
countDown();//先调用一次这个函数 防止第一次刷新页面有空白
//2、开启定时器
setInterval(countDown,1000);//1000毫秒，每一秒钟调用一次函数
//3、倒计时-时分秒函数
function countDown(){

var nowTime=+new Date(); //返回的是当前时间的总的毫秒数

var times=(inputTime-nowTime)/1000; // times是剩余时间的总的毫秒数

var h=parseInt(times/60/60%24);

h=h<10?'0'+h:h;//判断数值小于10的情况 如 0-9改为 00-09

hour.innerHTML=h;//更改div里面的内容 把h给获取元素hour的内容

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;//同上
}
//1、获取元素
var hour=document.querySelector('.hour');
var minute=document.querySelector('.minute');
var second=document.querySelector('.second');
var inputTime=+new Date('2021-3-11 20:00:00');//倒计时的结束时间，自己设置时间
countDown();//先调用一次这个函数 防止第一次刷新页面有空白
//2、开启定时器
setInterval(countDown,1000);//1000毫秒，每一秒钟调用一次函数
//3、倒计时-时分秒函数
function countDown(){

var nowTime=+new Date(); //返回的是当前时间的总的毫秒数

var times=(inputTime-nowTime)/1000; // times是剩余时间的总的毫秒数

var h=parseInt(times/60/60%24);

h=h<10?'0'+h:h;//判断数值小于10的情况 如 0-9改为 00-09

hour.innerHTML=h;//更改div里面的内容 把h给获取元素hour的内容

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;//同上
}效果图最后代码过程就不过多讲解，比较简单易写，如需改进的地方，请评论再改进，谢谢JavaScript时钟特效点击查看：JavaScript时钟特效专题JavaScript时钟特效专题JavaScript倒计时特效点击查看：JavaScript倒计时专题JavaScript倒计时专题以上就是本文的全部内容，希望对大家的学习有所帮助。