Maison > Article > interface Web > Partagez le code de compte à rebours JavaScript le plus simple (code complet ci-joint)

Partagez le code de compte à rebours JavaScript le plus simple (code complet ci-joint)

yuliaoriginal: 2018-10-15 10:30:5422887parcourir

Au travail, nous avons souvent besoin de définir un compte à rebours sur la page. Savez-vous comment écrire du code de compte à rebours JS ? Cet article partagera avec vous le code de compte à rebours JS le plus simple, ainsi que les idées détaillées de code de compte à rebours JS. Il a une certaine valeur de référence et les amis intéressés peuvent y jeter un œil.

Exemple : Fixez une date limite et affichez le temps restant. Par exemple, Double Eleven arrive bientôt et les commerçants organisent des activités. Ils peuvent utiliser le compte à rebours JS pour indiquer combien de temps il reste jusqu'à la fin de l'activité. Le code spécifique est le suivant :

Partie HTML :

<body onload = "countTime()">
  <div>
         <span id="day"></span>
         <span id="hour"></span>
         <span id="minute"></span>
         <span id="second"></span>
    </div>
 </body>

Donner quatre balises pour afficher les jours, heures, minutes et secondes restants

Partie JavaScript :

<script type="text/javascript">
  function countTime() {
            //获取当前时间
            var date = new Date();
            var now = date.getTime();
            //设置截止时间
            var endDate = new Date("2018-10-31 0:0:0");
            var end = endDate.getTime();
            //获取截止时间和当前时间的时间差
            var leftTime = end-now;
            //定义变量 d,h,m,s分别保存天数，小时，分钟，秒
            var d,h,m,s;
            //判断剩余天数，时，分，秒
            if (leftTime>=0) {
                d = Math.floor(leftTime/1000/60/60/24);
                h = Math.floor(leftTime/1000/60/60%24);
                m = Math.floor(leftTime/1000/60%60);
                s = Math.floor(leftTime/1000%60);                   
            }
            //将时间赋值到div中
            document.getElementById("day").innerHTML = d+"天";
            document.getElementById("hour").innerHTML = h+"时";
            document.getElementById("minute").innerHTML = m+"分";
            document.getElementById("second").innerHTML = s+"秒";
            //递归每秒调用countTime方法，显示动态时间效果
            setTimeout(countTime,1000);
 
        }
 </script>

Idées de code JS du compte à rebours :

1 Utilisez date = new Date() pour obtenir l'heure actuelle

2. endDate = new Date("2018-10-31 0:0:0")

3. Obtenez le décalage horaire leftTime = end-now

4. ,s, Utilisez la fonction if pour déterminer les jours, heures, minutes et secondes restants

5. Utilisez innerHTML pour attribuer l'heure au div

6. Appelez récursivement la fonction countTime toutes les secondes. pour afficher l'effet de temps dynamique

L'effet est comme indiqué sur l'image :

Partagez le code de compte à rebours JavaScript le plus simple (code complet ci-joint)

Ce qui précède a partagé avec vous un simple code de compte à rebours JS et l'a expliqué l'idée du code de compte à rebours JS en détail. Vous pouvez l'utiliser directement au travail. Les débutants peuvent l'essayer par eux-mêmes pour voir s'ils peuvent obtenir l'effet de compte à rebours. pour vous!

Tutoriels vidéo associés recommandés : 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!

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：Quelle est la différence entre bootstrap et jquery ? Comparaison des différences entre bootstrap et jqueryArticle suivant：Quelle est la différence entre bootstrap et jquery ? Comparaison des différences entre bootstrap et jquery

Articles Liés

Voir plus