Introduction to the principles and examples of countdown in javascript (code)-JS Tutorial-php.cn

Introduction to the principles and examples of countdown in javascript (code)

不言

Release： 2018-09-01 10:51:40

Original

2024 people have browsed it

This article brings you an introduction to the principles and examples of countdown in JavaScript (code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Countdown principle: future time point - present time point // present time point (changing) var iNow = new Date();
// future time point (unchanged)

//下面两种方法都可以定义未来的时间点
// var iNew = new Date( 2013, 10, 27,  21,56,0  );

var iNew = new Date( &#39;November 27,2013 22:3:0&#39; );

// 数字形式：new Date( 2013,4,1,9,48,12 );
// 字符串形式：new Date(&#39;June 10,2013 12:12:12&#39;);

// January、February、March、April、May、June、
// July、August、September、October、November、December

Copy after login

var t = Math.floor((iNew - iNow)/1000); Divide by 1000 to convert milliseconds into seconds. Because decimals may appear, round down to integer

// days ：Math.floor(t/86400) How many days is the difference between the future time and the present time
// Hours: Math.floor(t�400/3600) How many hours is the difference between the future time and the present time
// Minutes: Math.floor (t�400600/60) How many minutes is the difference between the future time and the present time
// seconds: t` How many seconds is the difference between the future time and the present time

Countdown example:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.t1 { width:400px; }
</style>
<script>

/*
var t =  Math.floor( new Date().getTime()/1000 );
alert( Math.floor(t/86400)+&#39;天&#39;+Math.floor(t%86400/3600)+&#39;时&#39;+Math.floor(t%86400%3600/60)+&#39;分&#39;+t%60+&#39;秒&#39; );
*/

window.onload = function () {
	var aInp = document.getElementsByTagName(&#39;input&#39;);
	var iNow = null;
	var iNew = null;
	var t = 0;
	var str = &#39;&#39;;
	var timer = null;
	
	aInp[2].onclick = function () {
		iNew = new Date(aInp[0].value);
		clearInterval( timer );
		
		timer = setInterval (function (){
			
			iNow = new Date();
			t = Math.floor( ( iNew - iNow ) / 1000 );
			
			if ( t >= 0 ) {
				
				str = Math.floor(t/86400)+&#39;天&#39;+Math.floor(t%86400/3600)+&#39;时&#39;+Math.floor(t%86400%3600/60)+&#39;分&#39;+t%60+&#39;秒&#39;;
			
				aInp[1].value = str;
				
			} else {
				
				clearInterval( timer );
				
			}
		
		}, 1000);
	};
};
</script>
</head>

<body>

距离：<input class="t1" type="text" value="November 27,2013 22:3:0" /><br />
还剩：<input class="t1" type="text" />
<input type="button" value="开始倒计时吧" />

</body>
</html>

Copy after login

Related recommendations:

JS implementation of countdown effect examples (2 examples)_javascript skills

JS implementation of countdown button examples_javascript skills

The above is the detailed content of Introduction to the principles and examples of countdown in javascript (code). For more information, please follow other related articles on the PHP Chinese website!