Maison > Article > interface Web > Introduction aux principes et exemples de compte à rebours en javascript (code)

Introduction aux principes et exemples de compte à rebours en javascript (code)

不言original: 2018-09-01 10:51:402011parcourir

Cet article vous apporte une introduction aux principes et exemples de compte à rebours en JavaScript (code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Principe du compte à rebours : point temporel futur - point temporel présent // point temporel présent (changeant) var iNow = new Date();
// point temporel futur (inchangé)

//下面两种方法都可以定义未来的时间点
// 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); Divisez par 1000 pour convertir les millisecondes en secondes. Comme des décimales peuvent apparaître, arrondissez à l'inférieur

/ / Jours : Math.floor(t/. 86400) Combien de jours représente la différence entre l'heure future et le présent
// Heures : Math.floor(t%86400/3600) Combien d'heures représente la différence entre l'heure future et le présent
// Minutes : Math .floor(t%86400%3600/60) Combien de minutes représente la différence entre l'heure future et le présent
// Secondes : t%60 Combien de secondes représente la différence entre l'heure future et le présent

Exemple de compte à rebours :

<!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>

Recommandations associées :

Exemples d'effets de compte à rebours implémentés par JS (2 exemples)_compétences javascript

Exemples de boutons de compte à rebours implémentés par JS_ compétences javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Analyse des tableaux Array en javascript (avec exemples)Article suivant：Analyse des tableaux Array en javascript (avec exemples)

Articles Liés

Voir plus