Implémenter une vente à durée limitée avec compte à rebours précis en millisecondes en fonction des compétences javascript_javascript

Cet article partage une implémentation javascript d'un compte à rebours pour une vente à durée limitée, avec un compte à rebours précis à la milliseconde près pour votre référence. Le contenu spécifique est le suivant

.

1. Rendus

L'image ci-dessous est l'effet de la saisie à durée limitée sur Juhuasuan

2. Connaissances nécessaires pour obtenir l'effet de capture à durée limitée : objet Javascript Date()
Date() renvoie la date et l'événement actuels
getYear() renvoie l'année. Il est préférable d'obtenir l'année
. Méthode getFullYear() à utiliser (format complet comme 2016)
getMonth() renvoie la valeur du mois (à partir de 0, +1)
getDay() renvoie le jour de la semaine (0-6)
getHours() renvoie le nombre d'heures (0-23)
getMinutes() renvoie le nombre de minutes (0-59)
getSeconds() renvoie le nombre de secondes
getTime() renvoie le nombre de millisecondes
Bien sûr, nous n’utiliserons pas nécessairement toutes les méthodes d’appel ci-dessus. Cela dépend aussi de vos propres besoins, passons directement au code :
1. Code de la page HTML :

Nous mettons le contenu du compte à rebours dans la balise

avec le temps restant de la classe.
2. Script JS :

$(function(){
  function leftTime(){
    var endTime = new Date("2016/5/20,12:00:00");//结束时间
    var curTime = new Date();//当前时间
    var leftTime = parseInt((endTime.getTime() - curTime.getTime())/1000);//获得时间差
    //小时、分、秒需要取模运算
    var d = parseInt(leftTime/(60*60*24));
    var h = parseInt(leftTime/(60*60)%24);
    var m = parseInt(leftTime/60%60);
    var s = parseInt(leftTime%60);
    var ms = parseInt(((endTime.getTime() - curTime.getTime())/100)%10);
    var txt = "剩余："+d+"天"+h+"小时"+m+"分钟"+s+"."+ms+"秒";
    $(".left-time").text(txt);
    if(leftTime<=0){ $(".left-time").text("团购结束");}
  };
  leftTime();
  var set = setInterval(leftTime,100);
});

Le js ci-dessus implémente un exemple simple de saisie de temps limité. La méthode parseInt() arrondit et getTime() convertit le temps en millisecondes. En plus de la méthode parseInt(), vous pouvez également utiliser Math.floor (. ) est remplacé par arrondi à l'inférieur.

Enfin, pensez à ne pas oublier de donner un if() pour déterminer ce qui doit être affiché une fois le temps écoulé, sinon des bugs inutiles apparaîtront !