<!--倒计时html-->
<a href="#">
???<p>本场剩余</p>
???<div class="countdown">
???????<span></span><i>:</i>
???????<span></span><i>:</i>
???????<span></span>
???</div>
???<p>查看更多<i> ></i></p>
</a>
/*倒计时css样式*/
.div1>a>div{
???height: 26px;
???font-size: 0;
???text-align: center;
}
.div1>a>div>span{
???display: inline-block;
???width: 36px;
???height: 26px;
???line-height: 26px;
???text-align: center;
???background-color: #392800;
???color: #fff;
???font-size: 20px;
???font-family: "Century Gothic";
???font-weight: bold;
}
.div1>a>div>i{
???display: inline-block;
???width: 16px;
???height: 26px;
???line-height: 26px;
???text-align: center;
???font-size: 14px;
???font-weight: bold;
???color: #392800;
???font-style: normal;
???position: relative;
???top: -8px;
}
// 倒计时js功能区域
/*——start——*/
/*获取倒计时区域所有span标签*/
var span = document.querySelectorAll(".countdown>span");
function countdown() {
???/*获取当前毫秒数*/
???var dateNewDate = new Date();
???var dateNew = dateNewDate.getTime();
???/*获取指定时间毫秒数*/
???var dateFutureDate = new Date("2017,8,23,09:00:00");
???var dateFuture = dateFutureDate.getTime();
???/*保存小时*/
???var hour = parseInt(((dateFuture - dateNew) / 1000 / 60 / 60));//小时
???/*保存分钟*/
???var minit = parseInt(((dateFuture - dateNew) / 1000 / 60) - hour * 60);//分钟
???/*保存秒*/
???var second = parseInt(((dateFuture - dateNew) / 1000) - hour * 60 * 60 - minit * 60);//秒
???/*少于两位数补零*/
???if (hour < 10) {
???????hour = "0" + hour;
???} else if (minit < 10) {
???????minit = "0" + minit;
???} else if (second < 10) {
???????second = "0" + second;
???}
???/*输入*/
???span[0].innerHTML = hour;
???span[1].innerHTML = minit;
???span[2].innerHTML = second;
}
/*设置定时器启动倒计时*/
setInterval("countdown()", 10);
/*——end——*/
原生js倒计时
原文地址：http://www.cnblogs.com/AgilityJin/p/7425833.html