js简单的倒计时器~~⏰
1.效果图
2.html部分
3.逻辑部分
3.1获取当前时间,时间差
//获取当前时间
var date = new Date();
var now = date.getTime();
//设置截止时间
var str = "2023/9/14 12:28:34";
var endDate = new Date(str);
var end = endDate.getTime();
//时间差
var leftTime = end - now;
3.2 d,h,m,s保存倒计时的时间
//定义变量 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);
} else {
d = 0;
h = 0;
m = 0;
s = 0
}
3.3 小于0的时候补0
// 定义 小于0补0 的方法zero
function zero(num) {
if (num < 10) {
return "0" + num
}
return num
}
3.4 赋值给div 渲染
// 赋值到div中
document.getElementById("_d").innerHTML = zero(d) + "天";
document.getElementById("_h").innerHTML = zero(h) + "时";
document.getElementById("_m").innerHTML = zero(m) + "分";
document.getElementById("_s").innerHTML = zero(s) + "秒";
3.5 递归的方法调用countTime方法,显示顶替时间
//递归每秒调用countTime方法,显示动态时间效果
setTimeout(countTime, 1000);
3.6 完整代码
<html>
<head>
<meta charset="UTF-8">
<title>js简单时分秒倒计时</title>
</head>
<style>
.box {
background: #17deb9;
width: 350px;
height: 60px;
text-align: center;
border-radius: 30px;
}
</style>
<body onload="countTime()">
<div class="box">
<!-- <button onclick="countTime()">点击</button>-->
<br>
<span id="_d">00</span>
<span id="_h">00</span>
<span id="_m">00</span>
<span id="_s">00</span>
</div>
</body>
<script type="text/javascript">
function countTime() {
//获取当前时间
var date = new Date();
var now = date.getTime();
//设置截止时间
var str = "2023/9/14 12:28:34";
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);
} else {
d = 0;
h = 0;
m = 0;
s = 0
}
//将倒计时赋值到div中(普通的写法)--1
// document.getElementById("_d").innerHTML = d+"天";
// document.getElementById("_h").innerHTML = h+"时";
// document.getElementById("_m").innerHTML = m+"分";
// document.getElementById("_s").innerHTML = s+"秒";
// -------------------------
//将倒计时赋值到div中(小于0,补0)--2
// 定义 小于0补0 的方法zero
function zero(num) {
if (num < 10) {
return "0" + num
}
return num
}
var setTimer = setInterval(function (){
// 赋值到div中
document.getElementById("_d").innerHTML = zero(d) + "天";
document.getElementById("_h").innerHTML = zero(h) + "时";
document.getElementById("_m").innerHTML = zero(m) + "分";
document.getElementById("_s").innerHTML = zero(s) + "秒";
// -------------------------------
let box = document.querySelector('.box') //获取元素
if (leftTime<=0) {
box.style.background = 'red';
// alert('事件到啦~秒杀!!!');
console.log('0')
clearInterval(setTimer) //终止定时器
}
},1000)
//递归每秒调用countTime方法,显示动态时间效果
// setTimeout(countTime, 1000);
// 倒计时 事件到了 弹出提醒
}
</script>
</html>
3.7 最推荐的方法~~
var nowTime = +new Date(); //获取当前总毫秒数
var inputTime = +new Date(time); //用户输入的总毫秒数
times = (inputTime - nowTime) / 1000; //剩余的总秒数
~~最后步骤是:将总剩余秒数转换成天时分秒
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body {
font-size: 22px;
text-align: center;
}
</style>
<body>
<p></p>
</body>
<script>
//倒计时 主要得到用户输入的时间减掉当前总毫秒数
//将times剩下总时间设置全局变量 方便倒计时函数可以调用
var times = null;
function countDown(time) {
var nowTime = +new Date(); //获取当前总毫秒数
var inputTime = +new Date(time); //用户输入的总毫秒数
times = (inputTime - nowTime) ; //剩余的总秒数
var d, h, m, s;
if (times>0){
//转换为天
d = Math.floor(times / 1000 / 60 / 60 / 24);
h = Math.floor(times / 1000 / 60 / 60 % 24);
m = Math.floor(times / 1000 / 60 % 60);
s = Math.floor(times / 1000 % 60);
//设置成时钟格式 00:00:00 利用三元运算符
h = h < 10 ? "0" + h : h
//转换为分
m = m < 10 ? "0" + m : m
//转换成秒
s = s < 10 ? "0" + s : s
return d + "天 " + h + ":" + m + ":" + s;
}else {
return "0天 " + '00' + ":" +'00' + ":" + '00';
}
}
var p = document.querySelector("p"); //获取元素
var timer = setInterval(function() {
p.innerHTML = countDown('2023-09-14 16:22:50'); //用户输入
if (times < 0) {
console.log('00')
clearInterval(timer) //终止定时器
}
}, 1000);
</script>
</html>