目录
一、倒计时效果
? ? ? ?1.核心算法
? ? ? ? 输入的时间减去现在的时间就是剩余的时间（剩余时间毫秒数 转换为 剩余时间的 年月日时分秒），即倒计时 。但是，不能拿着时分秒相减，比如 05 分减去25分，结果会是负数的。
? ? ? ?2.用时间戳来做
? ? ? ?用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数。
? ? ? ?比如 将来时间戳 2000ms - 现在的时间戳 10000ms = 10000ms。1000ms转换为就是0小时0分1秒。
? ? ? ? 获取时间戳有三种方法 geiTime()? ? ? ?简写 +new Date()? ? ? ?Date.now()
? ? ? ?3.把剩余时间总的毫秒数转换为天、时、分、秒 （时间戳转换为时分秒）
二、转换公式
如下：
????d = parseInt(总秒数/ 60/60 /24); ???// ?计算天数
????h = parseInt(总秒数/ 60/60 %24);?? ?// ??计算小时
????m = parseInt(总秒数 /60 %60 ); ???? // ??计算分数
????s = parseInt(总秒数%60); ???????????// ??计算当前秒数
var nowTime = new Date();//获取当前系统时间
var endTime = new Date('2022-6-26');//定义结束的时间
var time = endTime.getTime() - nowTime.getTime();//距离结束时间的毫秒数
console.log(time);
var day = Math.floor(time/(1000*60*60*24));//计算天数
console.log(day);
var hour = Math.floor(time/(1000*60*60)%24);//计算小时
console.log(hour);
var minute = Math.floor(time/(1000*60)%60) //计算分钟
console.log(minute);
var seconds = Math.floor(time/1000%60) //计算秒数
console.log(seconds);
效果显示 ：
三、主要代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
// var nowTime = new Date();//获取当前系统时间
// var endTime = new Date('2022-6-30');//定义结束的时间
// var time = endTime.getTime() - nowTime.getTime();//距离结束时间的毫秒数
// console.log(time);
// var day = Math.floor(time/(1000*60*60*24));//计算天数
// console.log(day);
// var hour = Math.floor(time/(1000*60*60)%24);//计算小时
// console.log(hour);
// var minute = Math.floor(time/(1000*60)%60) //计算分钟
// console.log(minute);
// var seconds = Math.floor(time/1000%60) //计算秒数
// console.log(seconds);
function showtime(){
var nowTime = new Date();//获取当前系统时间
var endTime = new Date('2022-6-30');//定义结束的时间
var time = endTime.getTime() - nowTime.getTime();//距离结束时间的毫秒数
// console.log(time);
var day = Math.floor(time/(1000*60*60*24));//计算天数
// console.log(day);
var hour = Math.floor(time/(1000*60*60)%24);//计算小时
// console.log(hour);
var minute = Math.floor(time/(1000*60)%60) //计算分钟
// console.log(minute);
var seconds = Math.floor(time/1000%60) //计算秒数
// console.log(seconds);
return '倒计时：' + day + '天 ' + hour + ':' + minute + ':' + seconds;
}
window.onload=function(){
//获取下面的div标签节点
var div =document.getElementById('showtime');
setInterval(function(){
div.innerHTML= showtime();
},1000)//设置定定时器 每隔1000毫秒反复执行 showtime函数
}
</script>
<div id="showtime"></div>
</body>
</html>
四、效果展示
