Maison >interface Web >js tutoriel >js implémente un exemple de code d'effet d'animation de compte à rebours via l'objet Date

js implémente un exemple de code d'effet d'animation de compte à rebours via l'objet Date

小云云original: 2018-01-02 09:22:201571parcourir

Cet article présente principalement en détail l'effet d'animation de compte à rebours obtenu par js via l'objet Date. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

js implémente l'effet de compte à rebours via l'objet Date, le contenu spécifique est le suivant

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>倒计时动画</title>
  <style>
    p{
      text-align:center;
      height:100px;
      line-height:100px;
    }
  </style>
  <script>
    window.onload = function(){
      setInterval(FreeTime,1000);
    }
    function FreeTime(){
      var curTime = Date.now();
      var endTime = new Date("2017-10-26 16:00:00");
      var allFreeSeconds = (endTime-curTime)/1000;
      if(allFreeSeconds>0){
        var freeDay = Math.floor(allFreeSeconds/(24*60*60));
        var freeHour = Math.floor(allFreeSeconds/(60*60) % 24);
        var freeMinute = Math.floor(allFreeSeconds/60 % 60);
        var freeSecond = Math.floor(allFreeSeconds%60);
        document.getElementById("nowTime").innerHTML = "剩余"+freeDay+"天"+freeHour+"时"+freeMinute+"分"+freeSecond+"秒";
      }
      else{
        document.getElementById("nowTime").innerHTML = "已结束";
      }
    }
  </script>
</head>
<body>
<p>
  <span id="nowTime"></span>
</p>
</body>
</html>

Recommandations associées :

Partage de la technologie de la fonction de compte à rebours d'explosion simulée jQuery

Implémentation de la fonction de minuterie jQuery et de la fonction de compte à rebours

Trois types de js et jQuery à implémenter Fonction de compte à rebours d'enregistrement des utilisateurs Méthode

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!

jquery date 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：Entrée d'entrée de l'applet WeChat et méthode de bouton de réglage dynamiqueArticle suivant：Entrée d'entrée de l'applet WeChat et méthode de bouton de réglage dynamique

Articles Liés

Voir plus