JavaScript-----页面显示倒计时

鹿蹊zz

已于 2022-07-04 16:20:48 修改

阅读量1.9k

点赞数 5

分类专栏： JavaScript 文章标签： javascript

于 2022-06-26 17:16:10 首次发布

本文链接：https://blog.csdn.net/m0_46461853/article/details/125471268

版权

时间戳倒计时转换公式 JavaScript 日期计算

关键词由CSDN通过智能技术生成

JavaScript 专栏收录该内容

21 篇文章 2 订阅

订阅专栏

一、倒计时效果

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>