前端js——倒计时效果实现动态显示倒计时

最新推荐文章于 2024-05-11 22:28:52 发布

不要生病~

最新推荐文章于 2024-05-11 22:28:52 发布

阅读量1.9w

点赞数 17

分类专栏：前端文章标签：前端 js 倒计时时间动态

本文链接：https://blog.csdn.net/qq_41141657/article/details/88926447

版权

前端专栏收录该内容

35 篇文章 1 订阅

订阅专栏

在这里插入图片描述

1.页面布局

<h1 id="show">距离2020年元旦还有：<span></span>天<span></span>小时<span></span>分<span></span>秒</h1>

2.js动态显示

getTime()获得设定的时期与1970年1月1日时间相差的毫秒数

1）获得插入数字的位置

var show=document.getElementById("show").getElementsByTagName("span");

2）声明现在的时间和未来的时间

var timeing=new Date();
var time=new Date(2020,0,1,0,0,0);

3）获得两个时间差

var num=time.getTime()-timeing.getTime();

4）计算天数(24小时60分钟60秒*1000毫秒) parseInt()取整

var day=parseInt(num/(24*60*60*1000));

5)获得去除天数后剩余的毫秒数

num=num%(24*60*60*1000);

6)计算小时和获得去除小时后剩余的毫秒数

var hour=parseInt(num/(60*60*1000));            
num=num%(60*60*1000);

7）计算分钟和获得去除分钟后剩余的毫秒数

var minute=parseInt(num/(60*1000));
num=num%(60*1000);

8）计算秒

var seconde=parseInt(num/1000);

9）页面上显示

              show[0].innerHTML=day;
              show[1].innerHTML=hour;
              show[2].innerHTML=minute;
              show[3].innerHTML=seconde;

10）设置定时器每一秒获取一次新的时间

3.源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<h1 id="show">距离2020年元旦还有：<span></span>天<span></span>小时<span></span>分<span></span>秒</h1>
		
		<script>
			var show=document.getElementById("show").getElementsByTagName("span");
			
			setInterval(function(){
			var timeing=new Date();
			var time=new Date(2020,0,1,0,0,0);
            var num=time.getTime()-timeing.getTime();
            
            var day=parseInt(num/(24*60*60*1000));			
            num=num%(24*60*60*1000);
            var hour=parseInt(num/(60*60*1000));            
            num=num%(60*60*1000);
            var minute=parseInt(num/(60*1000));
            num=num%(60*1000);
            var seconde=parseInt(num/1000);
             
              show[0].innerHTML=day;
              show[1].innerHTML=hour;
              show[2].innerHTML=minute;
              show[3].innerHTML=seconde;
            },100)
            
            
		</script>
	</body>
</html>

不要生病~

关注

17
点赞
踩
57

收藏

觉得还不错? 一键收藏
4
评论
前端js——倒计时效果实现动态显示倒计时

1.页面布局<h1 id="show">距离2020年元旦还有：<span></span>天<span></span>小时<span></span>分<span></span>秒</h1>2.js动态显示getTime()获得设定的时期与1970年1月1日时间相差的毫秒...
复制链接

扫一扫