Home > Article > Web Front-end > Introduction to the principles and examples of countdown in javascript (code)

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

不言Original: 2018-09-01 10:51:402009browse

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

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Parsing of Array arrays in javascript (with examples)Next article：Parsing of Array arrays in javascript (with examples)

See more

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

Related articles