Maison > interface Web > js tutoriel > js implémente l'effet d'animation de compte à rebours via le partage d'exemples d'objet Date

js implémente l'effet d'animation de compte à rebours via le partage d'exemples d'objet Date

小云云
Libérer: 2018-01-20 11:12:13
original
1671 Les gens l'ont consulté

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>
Copier après la connexion

Recommandations associées :

Code d'effets spéciaux d'animation de compte à rebours de la barre de progression html5+css3 [recommandé] Compétences du didacticiel _html5

Comment utiliser l'objet date dans Js

Un résumé de l'objet Date en 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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal