大家好，又见面了，我是你们的朋友全栈君。
在一些活动项目中，大多会涉及倒计时。以下为倒计时代码，供小白参考。
关键词：计时器、时间差
具体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>倒计时代码</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-family: "微软雅黑";
font-size: 20px;
}
.time {
overflow: hidden;
margin: 100px auto;
border: 1px solid blue;
text-align: center;
background: #65ed45;
border-radius: 10px;
padding: 20px;
width: 530px;
}
.time h3 {
font-size: 30px;
text-align: center;
padding-bottom: 30px;
letter-spacing: 5px;
}
.time h3 input {
border: none;
width: 100px;
height: 35px;
text-align: center;
border-radius: 8px;
background: #f2f2f2;
}
.time .even,
.time .odd {
float: left;
height: 50px;
text-align: center;
line-height: 50px;
margin-right: 10px;
border-radius: 8px;
}
.time .even {
width: 35px;
padding: 0 20px;
background: #b34e0a;
color: #ffffff;
}
.time .odd {
width: 20px;
padding: 0 10px;
background: #ffffff;
}
#lastDiv {
margin-right: 0;
}
</style>
</head>
<body>
<div class="time">
<h3>距离2021年元旦还有:</h3>
<div id="residueDays" class="even"></div>
<div class="odd">天</div>
<div id="residueHours" class="even"></div>
<div class="odd">时</div>
<div id="residueMinutes" class="even"></div>
<div class="odd">分</div>
<div id="residueSeconds" class="even"></div>
<div class="odd" id="lastDiv">秒</div>
</div>
</body>
</html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
function countDownTime() {
// 倒计时截止时间
var EndTime = new Date('2021/01/01 00:00:00');
// 现在的事件
var NowTime = new Date();
// 时间差（时间单位：ms）
var t = EndTime.getTime() - NowTime.getTime();
var d = 0;
var h = 0;
var m = 0;
var s = 0;
if(t >= 0) {
// 向下取整
d = Math.floor(t / 1000 / 60 / 60 / 24);
h = Math.floor(t / 1000 / 60 / 60 % 24);
m = Math.floor(t / 1000 / 60 % 60);
s = Math.floor(t / 1000 % 60);
}
// 如果是一位数，前面拼接"0"
function toDouble(num) {
return num < 10 ? '0' + num : num;
}
$("#residueDays").html(d);
$("#residueHours").html(toDouble(h));
$("#residueMinutes").html(toDouble(m));
$("#residueSeconds").html(toDouble(s));
}
setInterval(countDownTime, 1000)
</script>效果图：
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/125290.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...