原生JS实现倒计时功能

最新推荐文章于 2024-05-22 01:53:01 发布

卷B只有挂在墙上才知道休息

最新推荐文章于 2024-05-22 01:53:01 发布

阅读量997

点赞数 2

分类专栏：为不上班而上班文章标签：倒计时原生 JS 每日秒杀倒计时功能

本文链接：https://blog.csdn.net/qq_39051175/article/details/99680594

版权

为不上班而上班专栏收录该内容

95 篇文章 8 订阅

订阅专栏

原生JS实现的倒计时功能

效果图
在这里插入图片描述

说明：在代码第四十航行，设置你要倒计时的时间是的参照物

2019年8月16日 16:21:18 距离 2018-8-22 是负的360天 17小时 20分

在这里插入图片描述

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h1 class="title">距离光棍节还有</h1>
	<div>
	<span><span id="day" >00</span>天</span>
	<strong><span id="hour">00</span>时</strong>
	<strong><span id="minute">00</span>分</strong>
	<strong><span id="second">00</span>秒</strong>
	</div>
	<script>
	//此函数返回两个日期相差的 天 时 分 秒
	function getInterval(start,end){
		//时间差 毫秒值
		var interval = end - start;
		//转换成秒 相差的总共的秒数
		interval = interval/1000 ;
		var day,hour,minute,second;
		day = Math.floor(interval/60/60/24);
		hour = Math.floor(interval/60/60%24);
		minute = Math.floor(interval/60%60);
		second = Math.floor(interval%60);
		return {
			day : day,
			hour : hour,
			minute : minute,
			second : second
		}
	}
	//倒计时
	var spanDay = document.getElementById('day');
	var spanHour = document.getElementById('hour');
	var spanMinute = document.getElementById('minute');
	var spanSecond = document.getElementById('second');
	//显示的是当前时间到下面这个时间的时间差
	var end = new Date('2018-8-22');
	setInterval(countdown,1000);
	//先调用一次 这样刚打开网页就不用等1秒才开始定时器了
	countdown();

	function countdown(){

		var start = new Date();
		var obj = getInterval(start,end);


		// 给数值不够两位的补0
		obj.day =  obj.day < 10 ?'0'+obj.day : obj.day;  
		obj.hour =  obj.hour < 10 ?'0'+obj.hour : obj.hour;  
		obj.minute =  obj.minute < 10 ?'0'+obj.minute : obj.minute;  
		obj.second =  obj.second < 10 ?'0'+obj.second : obj.second ;  
		
		spanDay.innerText = obj.day;
		spanHour.innerText = obj.hour;
		spanMinute.innerText = obj.minute;
		spanSecond.innerText = obj.second;
	
	}
	</script>
</body>
</html>

卷B只有挂在墙上才知道休息

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
原生JS实现倒计时功能

原生JS实现的倒计时功能效果图说明：在代码第四十航行，设置你要倒计时的时间是的参照物2019年8月16日 16:21:18 距离 2018-8-22 是负的360天 17小时 20分代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <ti...
复制链接

扫一扫