Maison > interface Web > js tutoriel > Afficher l'heure actuelle et la fonction de compte à rebours en fonction des compétences javascript_javascript

Afficher l'heure actuelle et la fonction de compte à rebours en fonction des compétences javascript_javascript

WBOY
Libérer: 2016-05-16 15:10:19
original
1489 Les gens l'ont consulté

Pour m'auto-entraîner, j'aimerais partager avec vous un morceau de code natif js.
Les objets Date sont utilisés pour gérer les dates et les heures.
Date() Renvoie la date et l'heure du jour en cours.
getDate() Renvoie le jour du mois (1 ~ 31) à partir d'un objet Date.
getDay() Renvoie le jour de la semaine (0 ~ 6) à partir de l'objet Date.
getMonth() Renvoie le mois (0 ~ 11) de l'objet Date.
getFullYear() Renvoie l'année sous forme de nombre à quatre chiffres à partir d'un objet Date.
getYear() Veuillez utiliser la méthode getFullYear() à la place.
getHours() renvoie les heures (0 ~ 23) de l'objet Date.
getMinutes() renvoie les minutes (0 ~ 59) de l'objet Date.
getSeconds() Renvoie les secondes de l'objet Date (0 ~ 59).
getMilliseconds() renvoie les millisecondes (0 ~ 999) de l'objet Date.
getTime() Renvoie le nombre de millisecondes depuis le 1er janvier 1970.
getTimezoneOffset() Renvoie la différence en minutes entre l'heure locale et l'heure moyenne de Greenwich (GMT).
getUTCDate() Renvoie le jour du mois (1 ~ 31) à partir d'un objet Date basé sur l'heure universelle.
getUTCDay() Renvoie le jour de la semaine (0 ~ 6) à partir d'un objet Date basé sur l'heure universelle.
getUTCMonth() Renvoie le mois (0 ~ 11) d'un objet Date en fonction du temps universel.
getUTCFulYear() Renvoie l'année à quatre chiffres à partir d'un objet Date basé sur le temps universel.
getUTCHours() Renvoie l'heure (0 ~ 23) d'un objet Date selon le temps universel.
getUTCMinutes() Renvoie les minutes (0 ~ 59) d'un objet Date en fonction du temps universel.
getUTCSeconds() Renvoie les secondes (0 ~ 59) d'un objet Date en fonction du temps universel.
getUTCMilliseconds() Renvoie les millisecondes (0 ~ 999) de l'objet Date en fonction du temps universel.
parse() Renvoie le nombre de millisecondes entre minuit le 1er janvier 1970 et la date spécifiée (chaîne).
setDate() définit le jour du mois (1 ~ 31) dans l'objet Date.
setMonth() définit le mois (0 ~ 11) dans l'objet Date.
setFullYear() Définit l'année (quatre chiffres) dans l'objet Date.
setYear() Veuillez utiliser la méthode setFullYear() à la place.
setHours() Définit les heures (0 ~ 23) dans l'objet Date.
setMinutes() Définit les minutes (0 ~ 59) dans l'objet Date.
setSeconds() Définit les secondes (0 ~ 59) dans l'objet Date.
setMilliseconds() Définit les millisecondes (0 ~ 999) dans l'objet Date.
setTime() définit un objet Date en millisecondes.
setUTCDate() Définit le jour du mois (1 ~ 31) dans l'objet Date en fonction de l'heure universelle.
setUTCMonth() Définit le mois (0 ~ 11) dans l'objet Date en fonction du temps universel.
setUTCFulYear() Définit l'année (quatre chiffres) dans un objet Date en fonction du temps universel.
setUTCHours() Définit l'heure (0 ~ 23) dans l'objet Date en fonction du temps universel.
setUTCMinutes() Définit les minutes dans l'objet Date (0 ~ 59) en fonction du temps universel.
setUTCSeconds() Définit les secondes dans l'objet Date (0 ~ 59) en fonction du temps universel.
setUTCMilliseconds() Définit les millisecondes (0 ~ 999) dans l'objet Date en fonction du temps universel.
toSource() renvoie le code source de l'objet.
toString() Convertit un objet Date en chaîne.
toTimeString() Convertit la partie heure d'un objet Date en chaîne.
toDateString() Convertit la partie date de l'objet Date en chaîne.
toGMTString() Veuillez utiliser la méthode toUTCString() à la place.
toUTCString() Convertit un objet Date en chaîne selon le temps universel.
toLocaleString() Convertit un objet Date en chaîne selon le format de l'heure locale.
toLocaleTimeString() Convertit la partie heure de l'objet Date en chaîne selon le format de l'heure locale.
toLocaleDateString() Convertit la partie date de l'objet Date en chaîne selon le format de l'heure locale.
UTC() Renvoie le nombre de millisecondes entre le 1er janvier 1970 et la date spécifiée, selon le temps universel.
valueOf() renvoie la valeur d'origine de l'objet Date.
Code d'implémentation spécifique :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>原生js 当前时间 倒计时代码</title>
  <style>
  *{margin:0;padding:0;}
  body{text-align:center;}
  .text{margin-top:150px;font-size:14px;}
  </style>
  <script>
    window.onload=function(){      
      getMyTime(); 
      getMyTime1();  
    }
    //1.前面补0
    function p(n){
      return n<10&#63;'0'+n:n;
    }
    //2.倒计时
    function getMyTime(){      
      var startDate=new Date();
      var endDate=new Date('2017/4/17 11:15:00');
      var countDown=(endDate.getTime()-startDate.getTime())/1000;
      var day=parseInt(countDown/(24*60*60));
      var h=parseInt(countDown/(60*60)%24);
      var m=parseInt(countDown/60%60);
      var s=parseInt(countDown%60);        
      document.getElementById('time').innerHTML=day+'天'+p(h)+'时'+p(m)+'分'+p(s)+'秒';
      setTimeout('getMyTime()',500);
      if(countDown<=0){
       document.getElementById('time').innerHTML='活动结束'; 
      }       
    }
    //3.当前时间
    function getMyTime1(){
      var myDate=new Date();
      var year=myDate.getFullYear();
      var month=myDate.getMonth()+1;
      var day=myDate.getDate();
      var week=myDate.getDay();
      var array=['星期日','星期一','星期二','星期三','星期四','星期五','星期六',];
      var hour=myDate.getHours();
      var minute=myDate.getMinutes();
      var second=myDate.getSeconds();
      document.getElementById('time1').innerHTML=year+'年'+month+'月'+day+'日'+' '+array[week]+' '+p(hour)+':'+p(minute)+':'+p(second);
      setTimeout('getMyTime1()',500);
    }
  </script>
</head>
<body>
  <div class="text">
    <p>倒计时间:<span id="time"></span></p>
    <p>当前时间:<span id="time1"></span></p> 
  </div>
</body>
</html>
Copier après la connexion

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à tout le monde dans l'apprentissage de la programmation javascript.

É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