<!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">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<title>Document</title>
<style>
html {
font-size: 50px;
}
* {
font-size: 0.36rem;
}
.time {
text-align: center;
font-size: 0.36rem;
width: 1rem;
}
.div1 {
border: 1px solid steelblue;
height: 5rem;
position: absolute;
width: 10rem;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
border-radius: 15px;
background: #757F9A;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #D7DDE8, #757F9A);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #D7DDE8, #757F9A);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.div2 {
position: absolute;
background-color: tomato;
border: 1px solid steelblue;
height: 0.66rem;
width: 6.5rem;
left: 0;
right: 0;
top: 1.2rem;
bottom: 0;
margin: auto;
}
.div3 {
width: 6rem;
margin: 0 auto;
}
</style>
</head>
\
<body>
\
<div class="div1">
<div class="div3">
\
<label for="sTime">倒计时结束时间：</label> <input type="text" id="eTime" value="2021-7-23 18:00:00">
<input type="button" value="确定" id="btn" class="btn btn-primary">
\
</div>
\
<div class="div2">
<input type="text" id="day" readonly='readonly' class="time">天
<input type="text" id="hour" readonly='readonly' class="time">时
<input type="text" id="minute" readonly='readonly' class="time">分
<input type="text" id="second" readonly='readonly' class="time">秒
</div>
\
</div>
\
\
\
\
</body>
<script>
// 核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时 ，但是不能拿着时分秒
// 相减，比如 05 分减去25分，结果会是负数的。
// 用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时
// 间的毫秒数。
// 把剩余时间总的毫秒数转换为天、时、分、秒 （时间戳转换为时分秒）
// 转换公式如下：
// d = parseInt(总秒数/ 60/60 /24); // 计算天数
// h = parseInt(总秒数/ 60/60 %24) // 计算小时
// m = parseInt(总秒数 /60 %60 ); // 计算分数
// s = parseInt(总秒数%60); // 计算当前秒数
//页面加载调用
\
window.onload = function() {
//每1秒刷新时间
\
\
setInterval("endTime()", 1000);
\
\
\
}
\
function endTime() {
const btn = document.getElementById("btn");
// if (btn.onclick = function() {
// let getStime = document.getElementById("sTime").value;
// console.log(getStime);
// })
\
let getEtime; //前台获取的结束时间
getEtime = document.getElementById("eTime").value;
btn.onclick = function() {
getEtime = document.getElementById("eTime").value;
}
let nowTime; //开始时间
let inputTime; //结束时间
\
\
nowTime = Date.now();
inputTime = +new Date(getEtime);
console.log(nowTime + '@');
console.log(inputTime);
let times = (inputTime - nowTime) / 1000;
let d = parseInt(times / 60 / 60 / 24);
d = d < 10 ? '0' + d : d;
let h = parseInt(times / 60 / 60 % 24);
h = h < 10 ? '0' + h : h;
let m = parseInt(times / 60 % 60);
m = m < 10 ? '0' + m : m;
let s = parseInt(times % 60);
s = s < 10 ? '0' + s : s;
document.getElementById("day").value = d;
document.getElementById("hour").value = h;
document.getElementById("minute").value = m;
document.getElementById("second").value = s;
//document.getElementById("nowtime").innerHTML = "倒计时：" + d + "天 " + h + "时" + m + "分" + s + '秒';
}
</script>
\
</html>
输入结束时间，程序会以当前时间为引，计算倒计时，通过setInterval("endTime()", 1000);1秒刷新一次，从而使秒数实时更新。 运行结果如下：
