Heim > Web-Frontend > js-Tutorial > Zeigen Sie die aktuelle Uhrzeit und die Countdown-Funktion basierend auf Javascript_Javascript-Kenntnissen an

Zeigen Sie die aktuelle Uhrzeit und die Countdown-Funktion basierend auf Javascript_Javascript-Kenntnissen an

WBOY
Freigeben: 2016-05-16 15:10:19
Original
1508 Leute haben es durchsucht

Zur Selbstübung möchte ich Ihnen einen Teil des nativen js-Codes mitteilen.
Datumsobjekte werden zur Verarbeitung von Datums- und Uhrzeitangaben verwendet.
Date() Gibt das Datum und die Uhrzeit des aktuellen Tages zurück.
getDate() Gibt den Tag des Monats (1 ~ 31) aus einem Date-Objekt zurück.
getDay() Gibt den Wochentag (0 ~ 6) aus dem Date-Objekt zurück.
getMonth() Gibt den Monat (0 ~ 11) aus dem Date-Objekt zurück.
getFullYear() Gibt das Jahr als vierstellige Zahl aus einem Date-Objekt zurück.
getYear() Bitte verwenden Sie stattdessen die Methode getFullYear().
getHours() gibt die Stunden (0 ~ 23) des Date-Objekts zurück.
getMinutes() gibt die Minuten (0 ~ 59) des Date-Objekts zurück.
getSeconds() Gibt die Sekunden des Date-Objekts zurück (0 ~ 59).
getMilliseconds() gibt die Millisekunden (0 ~ 999) des Date-Objekts zurück.
getTime() Gibt die Anzahl der Millisekunden seit dem 1. Januar 1970 zurück.
getTimezoneOffset() Gibt die Differenz in Minuten zwischen der Ortszeit und der Greenwich Mean Time (GMT) zurück.
getUTCDate() Gibt den Tag des Monats (1 ~ 31) aus einem Date-Objekt basierend auf der Weltzeit zurück.
getUTCDay() Gibt den Wochentag (0 ~ 6) aus einem Date-Objekt basierend auf der Weltzeit zurück.
getUTCMonth() Gibt den Monat (0 ~ 11) aus einem Date-Objekt gemäß der Weltzeit zurück.
getUTCFulYear() Gibt das vierstellige Jahr aus einem Date-Objekt basierend auf der Weltzeit zurück.
getUTCHours() Gibt die Stunde (0 ~ 23) eines Date-Objekts gemäß der Weltzeit zurück.
getUTCMinutes() Gibt die Minuten (0 ~ 59) eines Date-Objekts gemäß der Weltzeit zurück.
getUTCSeconds() Gibt die Sekunden (0 ~ 59) eines Date-Objekts gemäß der Weltzeit zurück.
getUTCMilliseconds() Gibt die Millisekunden (0 ~ 999) des Date-Objekts gemäß der Weltzeit zurück.
parse() Gibt die Anzahl der Millisekunden von Mitternacht am 1. Januar 1970 bis zum angegebenen Datum (Zeichenfolge) zurück.
setDate() legt den Tag des Monats (1 ~ 31) im Date-Objekt fest.
setMonth() legt den Monat (0 ~ 11) im Date-Objekt fest.
setFullYear() Legt das Jahr (vierstellig) im Date-Objekt fest.
setYear() Bitte verwenden Sie stattdessen die Methode setFullYear().
setHours() Legt die Stunden (0 ~ 23) im Date-Objekt fest.
setMinutes() Setzt die Minuten (0 ~ 59) im Date-Objekt.
setSeconds() Legt die Sekunden (0 ~ 59) im Date-Objekt fest.
setMilliseconds() Legt die Millisekunden (0 ~ 999) im Date-Objekt fest.
setTime() setzt ein Date-Objekt in Millisekunden.
setUTCDate() Setzt den Tag des Monats (1 ~ 31) im Date-Objekt entsprechend der Weltzeit.
setUTCMonth() Setzt den Monat (0 ~ 11) im Date-Objekt entsprechend der Weltzeit.
setUTCFulYear() Setzt das Jahr (vierstellig) in einem Date-Objekt entsprechend der Weltzeit.
setUTCHours() Setzt die Stunde (0 ~ 23) im Date-Objekt entsprechend der Weltzeit.
setUTCMinutes() Setzt die Minuten im Date-Objekt (0 ~ 59) entsprechend der Weltzeit.
setUTCSeconds() Setzt die Sekunden im Date-Objekt (0 ~ 59) entsprechend der Weltzeit.
setUTCMilliseconds() Setzt die Millisekunden (0 ~ 999) im Date-Objekt entsprechend der Weltzeit.
toSource() gibt den Quellcode des Objekts zurück.
toString() Konvertiert ein Date-Objekt in einen String.
toTimeString() Konvertiert den Zeitanteil eines Date-Objekts in einen String.
toDateString() Konvertiert den Datumsteil des Date-Objekts in einen String.
toGMTString() Bitte verwenden Sie stattdessen die Methode toUTCString().
toUTCString() Konvertiert ein Date-Objekt entsprechend der Weltzeit in einen String.
toLocaleString() Konvertiert ein Date-Objekt entsprechend dem lokalen Zeitformat in einen String.
toLocaleTimeString() Konvertiert den Zeitteil des Date-Objekts entsprechend dem lokalen Zeitformat in einen String.
toLocaleDateString() Konvertiert den Datumsteil des Date-Objekts entsprechend dem lokalen Zeitformat in eine Zeichenfolge.
UTC() Gibt die Anzahl der Millisekunden vom 1. Januar 1970 bis zum angegebenen Datum gemäß der Weltzeit zurück.
valueOf() gibt den ursprünglichen Wert des Date-Objekts zurück.
Spezifischer Implementierungscode:

<!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>
Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für alle beim Erlernen der Javascript-Programmierung hilfreich sein wird.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage