JS set Interval()/setTimeout()——ダイナミックタイムを実現し、カウントダウン

25706 ワード

JavaScript 先端

一、ダイナミックタイム
1.set Interval()の実現
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();  //      ，     ！！

二、カウントダウン
現在時間を取得し、転送によって終了時間を取得し、それぞれ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);

これを見ました.かっこいい三連打をしてください.いいね、コレクション、メッセージ.

ネットで流行っているadd(2)(3)(4)