JS倒计时的方法

杨葱儿

于 2019-01-08 18:02:00 发布

阅读量300

点赞数

分类专栏： Function

本文链接：https://blog.csdn.net/weixin_44285250/article/details/86088373

版权

Function 专栏收录该内容

41 篇文章

订阅专栏

本文介绍了一个HTML页面的设计方案，用于显示距离特定日期（如2020年元旦）的倒计时，包括天数、小时、分钟和秒数的实时更新。文章详细展示了如何使用JavaScript进行时间计算和DOM元素的动态更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注意点：

括号里面的时间写法："2020-01-01 00:00:00" 使用这种写法可能ios那边识别不了会出现NAN的情况

换成"2020/01/01 00:00:00"这种 / 的格式ios和安卓都可以识别了

如果html显示里面有负数就在设置的时候使用Math.abs(）方法

show[0].innerHTML= Math.abs(day);

<!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>