Maison > Article > interface Web > Comment utiliser la minuterie pour implémenter la fonction de compte à rebours dans js

Comment utiliser la minuterie pour implémenter la fonction de compte à rebours dans js

php中世界最好的语言original: 2018-04-16 10:03:573252parcourir

Cette fois, je vais vous montrer comment utiliser timer pour implémenter la fonction de compte à rebours dans js Notes sur la façon d'utiliser la minuterie pour implémenter. la fonction compte à rebours dans js Lesquels, voici des cas pratiques, jetons un coup d'œil.

Fonction Date

Compte à rebours = utiliser l'heure future - l'heure présente

Question : L'heure future est à 1970 millisecondes - l'heure actuelle est à 1970 ans 1

Utilisez le nombre de millisecondes dans le futur - le nombre de millisecondes maintenant et continuez simplement à convertir

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
  body{
   font-size:30px;
   text-align: center;
   color:red;
  }
 </style>
 <script>
  window.onload = function(){
   var demo = document.getElementById("demo");
   var endTime = new Date("2017/11/12 17:30:00"); // 最终时间
   setInterval(clock,1000); // 开启定时器
   function clock(){
    var nowTime = new Date(); // 一定是要获取最新的时间
    // console.log(nowTime.getTime()); 获得自己的毫秒
    var second = parseInt((endTime.getTime() - nowTime.getTime()) / 1000);
    // 用将来的时间毫秒 - 现在的毫秒 / 1000 得到的 还剩下的秒 可能处不断 取整
    // console.log(second);
     // 一小时 3600 秒
    // second / 3600 一共的小时数 /24 天数
    var d = parseInt(second / 3600 / 24); //天数
    //console.log(d);
    var h = parseInt(second / 3600 % 24) // 小时
    // console.log(h);
    var m = parseInt(second / 60 );
    //console.log(m);
    var s = parseInt(second ); // 当前的秒
    console.log(s);
    /* if(d<10)
    {
     d = "0" + d;
    }*/
    d<10 ? d="0"+d : d;
    h<10 ? h="0"+h : h;
    m<10 ? m="0"+m : m;
    s<10 ? s="0"+s : s;
    demo.innerHTML = "距离抢购时间还剩: "+d+"天 "+h+"小时 "+m+"分钟 "+s+"秒";
   }
  }
 </script>
</head>
<body>
<p id="demo"></p>
</body>
</html>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention. vers d'autres articles connexes sur le site Web php chinois !

Lecture recommandée :

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!

php JS

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：Implémentation JS du cas d'utilisation de l'effet loupe d'imageArticle suivant：Implémentation JS du cas d'utilisation de l'effet loupe d'image

Articles Liés

Voir plus