Partagez un code clé js pour implémenter le compte à rebours

Cet article présente principalement le code clé de js pour implémenter le compte à rebours en détail. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Nous en discutons souvent dans Vous pouvez le voir. Comptes à rebours des ventes flash et comptes à rebours Double 11 sur certains sites e-commerce En fait, l'effet compte à rebours est très simple à mettre en œuvre et pas compliqué

Tout d'abord, vous devez clarifier vos idées avant de commencer à écrire. ce sera beaucoup plus facile à écrire. Je l'ai divisé en plusieurs étapes ci-dessous :

1. Obtenez l'heure actuelle et définissez l'heure de fin

2. le décalage horaire actuel et recherchez les heures, les minutes et les secondes

3. Réglez la minuterie pour que l'heure décrémente chaque seconde

var p = document.getElementsByTagName("p")[0];
      var timer = setInterval(timers, 1000);
      function timers() {
        //获取现在的时间
        var now = new Date();
        //获取你想要的未来时间
        var future = new Date("2017/05/10");
        var time = future.getTime() - now.getTime();
        //获取距离的天数
        var day = parseInt(time / 24 / 60 / 60 / 1000);
        //获取距离的小时
        var hour = parseInt(time / 1000 / 60 / 60 % 24);
        //获取分
        var minute = parseInt(time / 1000 / 60 % 60);
        //获取秒
        var sec = parseInt(time / 1000 % 60);
        if(time < 0) {
          p.innerHTML = "距离苹果发布会还有00天00小时00分00秒000毫秒";
          clearInterval(timer);
          return;
        }
        //注意点:当时间小于10的时候,要在前面补0
        p.innerHTML = "距离结束时间还有" + (day < 10 ? ("0" + day) : day) + "天" + (hour < 10 ? ("0" + hour) : hour) + "小时" + (minute < 10 ? ("0" + minute) : minute) + "分" + (sec < 10 ? ("0" + sec) : sec) + "秒";
      }

[Recommandations associées ]

1. Tutoriel vidéo en ligne js gratuit

2 Manuel de référence en chinois JavaScript

3. .cn Dugu Jiujian (3) -Tutoriel vidéo 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!