JS setInterval()/setTimeout()——实现动态时间,倒计时

一、动态时间

1.setInterval() 实现

html部分:

<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<style>
		div{
			width: 300px;
			height: 50px;
			color: orange;
			line-height: 50px;
			text-align: center;
			font-size:20px;
			border:1px solid #888;
			margin:10px auto  
		}
	style>
head>
<body>
	<div id="box">  div>
body>

JS部分:
先获取年月日、时分秒,再补0,最后动态显示时间

function showTime(){
    // 1.获取时间对象
	var date = new Date();
	// 2.获取年月日、时分秒
	var year = date.getFullYear();
	var month = date.getMonth() + 1;
	var day = date.getDate();
	var hour = date.getHours();
	var minute = date.getMinutes();
	var second = date.getSeconds();
	// 3.给小于10的数字前补0
/*		if(hour<10){
		hour = '0' + hour;
	}
	if(minute<10){
		minute = '0' + minute;
	}
	if(second<10){
		second = '0' + second;
	}*/
	// 封装成函数
	month=addZero(month);
	day=addZero(day);
	hour=addZero(hour);
	minute=addZero(minute);
	second=addZero(second);
	// 4.拼接字符串(此处需注意,必须拼接一个字符串,空串也行,否则将会变成数字相加)
	var time = year + '年' + month + '月' + day + ' ' + hour + ':' + minute + ':' + second;
	document.getElementById('box').innerHTML = time;
}
// 为数字添加0前缀
function addZero(num){
	if(num<10){
		num='0'+num;
	}
	return num;
}
// 先调用一次
showTime();  //目的:衔接,
setInterval(showTime,1000);  //每1s执行一次代码(所以开始执行的时候会间隔1s)

2.setTimeout() 实现

function getTime(){
	var date = new Date();
	var year = date.getFullYear();
	var month = date.getMonth() + 1;
	var day = date.getDate();
	var hour = date.getHours();
	var minute = date.getMinutes();
	var second = date.getSeconds();

	// 封装成函数
	month=addZero(month);
	day=addZero(day);
	hour=addZero(hour);
	minute=addZero(minute);
	second=addZero(second);

	var time = year + '年' + month + '月' + day + ' ' + hour + ':' + minute + ':' + second;
	document.getElementById('box').innerHTML = time;
	setTimeout(getTime,1000);
}
// 为数字添加0前缀
function addZero(num){
	if(num<10){
		num='0'+num;
	}
	return num;
}
getTime();  //函数必须调用,否则不执行!!

二、倒计时

获取当前时间,通过传参的方式获取结束时间,分别使用getTime()获取GMT时间,计算GMT时间差值,计算出差值所对应的时、分、秒等。

function showTime(){
	var date = new Date();  //获取当前时间
	var now = date.getTime();  //获取当前GMT时间 
	//dateObject.getTime(),dateObject指定的日期和时间距 1970年 1月 1日午夜(GMT 时间)之间的毫秒数。
	var endDate = new Date("2019-1-9 00:00:00");  //获取结束时间
	var end = endDate.getTime();  //获取结束GMT时间
	var diffTime = end - now;  //计算时间差
	console.log(diffTime);
	var d,h,m,s,ms;
	if(diffTime>=0){
		ms = Math.floor(diffTime % 1000);  
		console.log(ms);
		s = Math.floor(diffTime / 1000 % 60);
		m = Math.floor(diffTime / 1000 / 60 % 60);
		h = Math.floor(diffTime / 1000 / 60 / 60 % 24);
		d = Math.floor(diffTime / 1000 / 60 / 60 / 24);
		
		// 封装成函数
		d=addZero(d);
		h=addZero(h);
		m=addZero(m);
		s=addZero(s);
		if(ms<100){
			ms = '0' + ms;
			if(ms<10){
			ms = '00' + ms;
			}
		}
		
		var time = d + '天' + h + '时' + m + '分' + s + '秒' + ms + '毫秒';
		document.getElementById('box').innerHTML = time;
	}else{
		alert("倒计时结束!!");
	}
}
// 为数字添加0前缀
function addZero(num){
	if(num<10){
		num='0'+num;
	}
	return num;
}
showTime();
setInterval(showTime,1000);
看都看到这了,来个炫酷三连击 ——点赞、收藏、留言。

你可能感兴趣的:(JavaScript,前端)