效果图展示：
1、先了解获取时间的函数
Date()：获取当前系统时间
//获取当前系统时间
var date = new Date();
2、获取时间的方法
getHours()：获取小时值
getMinutes()：获取分钟值
getSeconds()：获取秒数值
var hours = date.getHours();//时
var minutes= date.getMinutes();//分
var seconds= date.getSeconds();//秒
3、解题思路
倒计时
也就是
当前时间
（开始时间）到
目标时间
（结束时间）的一个
差值
。所以我们只需要获取这两个时间即可，一般目标时间都为自定义时间。
4、完整代码
js部分：
这里目标时间设为20：00,如果当前时间错过了目标时间，就计算距离第二天与目标时间点的差值。
<script type="text/javascript">
function countTime() {
//获取当前时间
var date = new Date();
var hours = date.getHours();//时
var minutes= date.getMinutes();//分
var seconds= date.getSeconds();//秒
//统一化为秒数，方便计算
var kaishi = seconds + minutes * 60 + hours * 60 * 60;
var jieshu = 20 * 60 * 60;
//计算差值
var cha;
if(hours >= 20) cha = jieshu + 24 * 60 * 60-kaishi;
else cha = jieshu - kaishi;
var h,m,s;
h = Math.floor(cha/60/60%24);
m = Math.floor(cha/60%60);
s = Math.floor(cha%60);
// console.log(h+":"+m+":"+s);
document.getElementById("_h").innerHTML = h;
document.getElementById("_m").innerHTML = m;
document.getElementById("_s").innerHTML = s;
setTimeout(countTime,1000);
}
</script>
html部分：
图标链接shangou.png
<body onload="countTime()" >
<div class="tp6-1">
<div class="time">20:00场</div>
<div class="pic-sg"><img src="image/shangou.png" alt=""></div>
<div class="text-tip">距离开始还有</div>
<div class="count-time">
<i id="_h">00</i>
<span>:</span>
<i id="_m">00</i>
<span>:</span>
<i id="_s">09</i>
</div>
</div>
</body>
css部分：
.tp6-1 {
width: 198px;
height: 50%;
border-top: 1px solid red;
background-color: #eee8e8;
text-align: center;
}
.tp6-1 .time{
color: red;
margin: 46px 0;
font-size: 30px;
}
.text-tip{
color: #786262;
margin: 30px 0;
}
.pic-sg{
width: 19%;
height: 17%;
margin: auto;
}
.pic-sg img{
width: 100%;
height: 100%;
}
.count-time {
height: 12%;
text-align: center;
}
.count-time i {
width: 38px;
height: 38px;
background-color: #7f957f;
display: inline-block;
font-size: 26px;
}
.count-time span {
font-size: 26px;
}
结束语：
小白初试，有什么不妥的地方，还望各位多多指点。
参考文章：
前端页面实现倒计时效果的几种方法
版权声明：本文为qq_51304722原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。