案例分析
- 核心算法:输入的时间减去现在的时间就是剩余时间,即倒计时,但是不能拿时分秒去减,比如05分减去25分,结果是负数。
- 用时间戳来实现,用户输入时间总的毫秒数减去现在时间的总的毫秒数,得到的就是剩余时间的毫秒数。
- 把剩余时间的毫秒数转换为时分秒标准格式。
转换公式
代码语言:javascript复制d = parselnt(总秒数/60/60/24);//计算天数
h = parselnt(总秒数/60/60$); //计算小时
m = parselnt(总秒数/60`); //计算分数
s = parselnt(总秒数`); //计算当前秒数
代码实现
代码语言:javascript复制 function countDown(time) {
var nowTime = new Date(); //返回的是当前时间总的毫秒数
var inputTime = new Date(time); //返回的是用户输入时间总的毫秒数
var times = (inputTime - nowTime) / 1000; //time是剩余时间总的秒数
var d = parseInt(times / 60 / 60 / 24); //计算天数
var h = parseInt(times / 60 / 60 % 24); //计算小时
var m = parseInt(times / 60 % 60); //计算分数
var s = parseInt(times % 60); //计算当前秒数
return d '天' h '时' m '分' s '秒';
}
document.write(countDown('2022-4-10 24:00:00'));
固定时间倒计时
代码语言:javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="timer" style="color:red"></div>
</body>
<script type="text/javascript">
var oBox = document.getElementById('timer');
var maxtime = 10 * 60;//这里修改剩余多少时间 10*60 意思为10分钟
function CountDown() {
if (maxtime >= 0) {
minutes = Math.floor(maxtime / 60);
seconds = Math.floor(maxtime % 60);
msg = "距离结束还有" minutes "分" seconds "秒";
oBox.innerHTML = msg;
if (maxtime == 5 * 60) alert("还剩5分钟");
--maxtime;
} else {
clearInterval(timer);
alert("时间到,结束!");
}
}
timer = setInterval("CountDown()", 1000);
</script>
</html>
距离未来时间倒计时
代码语言:javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
function countTime() {
//获取当前时间
var date = new Date();
var now = date.getTime();
//设置截⽌时间
var str = "2022/6/1 00:00:00";
var endDate = new Date(str);
var end = endDate.getTime();
//时间差
var leftTime = end - now;
//定义变量 d,h,m,s保存倒计时的时间
var d, h, m, s;
if (leftTime >= 0) {
d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
m = Math.floor(leftTime / 1000 / 60 % 60);
s = Math.floor(leftTime / 1000 % 60);
}
//将倒计时赋值到div中
document.getElementById("_d").innerHTML = d "天";
document.getElementById("_h").innerHTML = h "时";
document.getElementById("_m").innerHTML = m "分";
document.getElementById("_s").innerHTML = s "秒";
//递归每秒调⽤countTime⽅法,显⽰动态时间效果
setTimeout(countTime, 1000);
}
</script>
</head>
<body onload="countTime()">
<div>
<span id="_d">00</span>
<span id="_h">00</span>
<span id="_m">00</span>
<span id="_s">00</span>
</div>
</body>
</html>
jQuery倒计时组件
jquery.downCount.js组件
代码语言:javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript"
src="https://cdn.staticfile.org/jquery.downCount/1.0.0/jquery.downCount.min.js"></script>
</head>
<body>
<div class="time2">
<span class="days">00</span>:<span class="hours">00</span>:<span class="minutes">00</span>:<span
class="seconds">00</span>
</div>
<script class="source" type="text/javascript">
$('.time2').downCount({
date: '12/24/2022 12:00:00',
offset: 8//时区东8区
}, function () {
alert('倒计时结束!');
});
</script>
</body>
</html>
利用定时器的倒计时
代码语言:javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
function countTime() {
//获取当前时间
var date = new Date();
var now = date.getTime();
//设置截⽌时间
var str = "2022/10/1 00:00:00";
var endDate = new Date(str);
var end = endDate.getTime();
//时间差
var leftTime = end - now;
//定义变量 d,h,m,s保存倒计时的时间
var d, h, m, s;
if (leftTime >= 0) {
d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
m = Math.floor(leftTime / 1000 / 60 % 60);
s = Math.floor(leftTime / 1000 % 60);
}
//将倒计时赋值到div中
document.getElementById("_d").innerHTML = d "天";
document.getElementById("_h").innerHTML = h "时";
document.getElementById("_m").innerHTML = m "分";
document.getElementById("_s").innerHTML = s "秒";
//递归每秒调⽤countTime⽅法,显⽰动态时间效果
setTimeout(countTime, 1000);
}
</script>
</head>
<body onload="countTime()">
<div>
<span id="_d">00</span>
<span id="_h">00</span>
<span id="_m">00</span>
<span id="_s">00</span>
</div>
</body>
</html>