Maison > Article > interface Web > Implémenter un exemple de code de compte à rebours beau et pratique basé sur jQuery_jquery

Implémenter un exemple de code de compte à rebours beau et pratique basé sur jQuery_jquery

WBOYoriginal: 2016-05-16 15:22:411098parcourir

Les effets de compte à rebours ont un large éventail d'applications, telles que le compte à rebours des Jeux Olympiques, le compte à rebours des examens d'entrée à l'université et le compte à rebours des vacances, etc. Cette section partage un effet de compte à rebours plus beau et plus pratique.

L'exemple de code est le suivant :

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>倒计时效果代码</title>
<style type="text/css">
* {
 padding:0;
 margin:0;
}
.colockbox {
 width:250px;
 height:30px;
 overflow:hidden;
 color:#000000;
 background:url(mytest/jQuery/colockbg.png) no-repeat;
 margin:0px auto;
}
.colockbox span {
 float:left;
 display:block;
 width:40px;
 height:29px;
 line-height:29px;
 font-size:20px;
 font-weight:bold;
 text-align:center;
 color:#ffffff;
 margin-right:22px;
}
</style>
<script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(function(){ 
 countDown("2016/2/3 6:30:59","#colockbox1"); 
}); 
function countDown(time,id){ 
 var day_elem=$(id).find('.day'); 
 var hour_elem=$(id).find('.hour'); 
 var minute_elem=$(id).find('.minute'); 
 var second_elem=$(id).find('.second'); 
 var end_time = new Date(time).getTime();
 var sys_second = (end_time-new Date().getTime())/1000; 
 var timer = setInterval(function(){ 
  if(sys_second>1) { 
   sys_second-=1; 
   var day=Math.floor((sys_second/3600)/24); 
   var hour=Math.floor((sys_second/3600)%24); 
   var minute=Math.floor((sys_second/60)%60); 
   var second=Math.floor(sys_second%60); 
   $(day_elem).text(day);
   $(hour_elem).text(hour<10&#63;"0"+hour:hour);
   $(minute_elem).text(minute<10&#63;"0"+minute:minute); 
   $(second_elem).text(second<10&#63;"0"+second:second);
  } 
  else { 
   clearInterval(timer); 
  } 
 }, 1000); 
} 
</script>
</head>
<body>
<div class="colockbox" id="colockbox1"> 
 <span class="day">00</span> 
 <span class="hour">00</span> 
 <span class="minute">00</span> 
 <span class="second">00</span> 
</div>
</body>
</html>

Le code ci-dessus répond à nos exigences et peut obtenir un effet de compte à rebours de quelques secondes à quelques jours. Le processus de mise en œuvre est présenté ci-dessous.

1.Principe de mise en œuvre :

Le principe est relativement simple. Il s'agit d'obtenir l'horodatage de l'heure d'expiration moins l'horodatage de l'heure actuelle, qui est le nombre de secondes de différence entre les deux. Ensuite, divisez ce nombre de secondes par 3600 pour obtenir le nombre. de différence d'heures, puis divisez Take 24, puis utilisez la fonction Math.floor() pour arrondir, qui est le nombre de jours. Ce principe est utilisé pour obtenir les heures, les minutes et les secondes ci-dessous. Utilisez la fonction minuterie pour appeler la fonction correspondante chaque seconde pour obtenir l'effet compte à rebours.

2. Commentaires du code :

1.$(function(){}), lorsque la structure du document est complètement chargée, exécutez le code dans la fonction.
2.countDown("2016/2/3 6:30:59","#colockbox1"), appelez la fonction, le premier paramètre est le délai d'expiration et le deuxième paramètre est la valeur de l'attribut id du div.
3.function countDown(time,id){}, déclarez cette fonction.
4.var day_elem=$(id).find('.day'), récupère l'objet dont la valeur de l'attribut de classe est day sous le div.
5.var hour_elem=$(id).find('.hour'), obtient l'objet dont la valeur de l'attribut de classe est heure sous le div.
6.var minute_elem=$(id).find('.minute'), récupère l'objet dont la valeur de l'attribut de classe est minute sous le div.
7.var second_elem=$(id).find('.second'), récupère l'objet dont la valeur de l'attribut de classe est la deuxième sous le div.
8.var end_time=new Date(time).getTime(), obtient l'horodatage de l'événement d'expiration.
9.var sys_second=(end_time-new Date().getTime())/1000, obtient le nombre de secondes de différence entre l'heure d'expiration et l'heure actuelle.
10.var timer=setInterval(function(){}, 1000), exécute la fonction toutes les secondes.
11.if(sys_second>1), si la différence en secondes est supérieure à 1.
12.sys_second-=1, soustrayez un de la seconde.
13.var day=Math.floor((sys_second/3600)/24), obtenez le nombre de jours de différence.
14.var hour=Math.floor((sys_second/3600)$), obtenez le nombre d'heures de différence, veuillez noter que ce qui suit est une opération modulo.
15.var minute=Math.floor((sys_second/60)`), obtenez la différence en nombre de minutes.
16.var second=Math.floor(sys_second`), obtenez le nombre de secondes de différence.
17.$(day_elem).text(day), écrit le jour dans l'élément span.
18.$(hour_elem).text(hour<10?"0" hour:hour), écrivez l'heure dans span. Si le nombre d'heures est inférieur à 10, ajoutez 0 devant, et la même raison derrière.
19.clearInterval(timer), si la différence en secondes atteint 0, arrêtez l'exécution de la fonction timer setInterval.

Le contenu ci-dessus est un exemple de code de compte à rebours magnifique et pratique basé sur jQuery que l'éditeur a partagé avec vous. J'espère que le partage de cet article pourra être utile à tout le monde.

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：Exemple d'affichage d'animation et d'effet de masquage jQuery (avec téléchargement du code source de la démo)_jqueryArticle suivant：Exemple d'affichage d'animation et d'effet de masquage jQuery (avec téléchargement du code source de la démo)_jquery

Articles Liés

Voir plus