Geben Sie den Javascript-Beispielcode zur aktuellen Clientzeit in den page_javascript-Kenntnissen aus

Das Zeitobjekt (Date()) ist relativ einfach für Anfänger. Experten können es überspringen.

In diesem Artikel werden grundlegende Wissensbeispiele behandelt und die Anforderungen der Beispiele erläutert:

Geben Sie die aktuelle Client-Zeit auf der Seite aus (im Format 10:10:10 am Montag, 1. Januar 2015). Die Seite wird nicht jede Sekunde aktualisiert, aber die Zeit wird automatisch aktualisiert (mithilfe von zwei Timer-Methoden). erreicht), Mausklickzeit, wenn die ursprüngliche Bewegung gestoppt wird, wird die Bewegung fortgesetzt

Die Anforderungen lassen sich grundsätzlich in zwei Teile unterteilen: Der eine besteht darin, die Uhrzeit automatisch zu aktualisieren, ohne sie zu aktualisieren, und der andere darin, auf die Uhrzeit zu klicken, um die Uhrzeit anzuhalten oder zu aktualisieren

Okay, folgen wir den alten Regeln Schritt für Schritt. Da es Zeit ist, verwenden wir das Zeitobjekt new Date();

var nowDate = new Date();
var time = {
year : nowDate.getFullYear(),
month : nowDate.getMonth(),
day : nowDate.getDate(),
week : nowDate.getDay(),
hour : nowDate.getHours(),
minute : nowDate.getMinutes(),
second : nowDate.getSeconds()
}; 

Ich erhalte das Zeitobjekt in Form eines Objekts, das bequem aufzurufen ist und eine klare Struktur aufweist. Diese Schreibmethode ist auch sehr praktisch Holen Sie sich den entsprechenden Wert, z. B. das Jahr: Jahr;

Nachdem wir die Daten erhalten haben, die wir benötigen, müssen wir uns mit dem Problem des Wochentags befassen, da der jetzt erhaltene Wert des Wochentags immer noch 1,2,3,4,5,6,7 beträgt . Hier müssen wir es konvertieren und in ändern. Für die Textinformationen, die wir sehen können, schließen wir es hier mit einer Funktion ein:

function Week(num){
switch(num){
case 1 :
return '星期一';
break;
case 2 :
return '星期二';
break;
case 3 :
return '星期三';
break;
case 4 :
return '星期四';
break;
case 5 :
return '星期五';
break;
case 6 :
return '星期六';
break;
case 7 :
return '星期日';
break; 
};
}

Hier verwende ich die Swicth-Case-Kombination, um ähnliche Urteile wie den Wochentag zu fällen. Natürlich kann man zur Beurteilung auch die If-else-Kombination verwenden Abhängig von Ihren persönlichen Gewohnheiten besteht ein Problem, das gelöst werden muss, darin, dass die Zahlen von 0 bis 9 angezeigt werden, wenn die erhaltenen Minuten und Sekunden zwischen 0 und 9 liegen

ist nicht unsere übliche Anzeige von 00-09. Um diese Zeit in etwas zu ändern, das wir kennen, können wir auch eine Funktion schreiben, um sie umzuwandeln:

function twoNum(num){
return num = num<10 &#63; '0'+num : num; 
} 

Ich verwende hier ternäre Arithmetik. Wenn Sie nicht viel über ternäre Arithmetik wissen, schauen Sie sich den Code unten an, er bedeutet dasselbe:

function twoNum(num){
if(num<10){
num = '0'+num; 
}
return num; 
}

Alles ist bereit, alles was wir brauchen ist der Ostwind. Integrieren wir zuerst diese Codes, um sie bequemer zu verwenden:

function Timer(obj){
var nowDate = new Date();
var time = {
year : nowDate.getFullYear(),
month : nowDate.getMonth(),
day : nowDate.getDate(),
week : nowDate.getDay(),
hour : nowDate.getHours(),
minute : nowDate.getMinutes(),
second : nowDate.getSeconds()
};
function Week(num){
switch(num){
case 1 :
return '星期一';
break;
case 2 :
return '星期二';
break;
case 3 :
return '星期三';
break;
case 4 :
return '星期四';
break;
case 5 :
return '星期五';
break;
case 6 :
return '星期六';
break;
case 7 :
return '星期日';
break; 
};
}
function twoNum(num){
return num = num<10 &#63; '0'+num : num; 
}
obj.innerHTML = time.year+'年'+time.month+'月'+time.day+'日 '+Week(time.week)+' '+time.hour+':'+twoNum(time.minute)+':'+twoNum(time.second);
}

Sie sollten diese Funktion verstehen. Der Zweck der Übergabe eines Objekts besteht darin, die Zeit in diesem Objekt auszugeben. Die Seite wird jedoch überhaupt nicht verschoben aktualisiert. Daher fahren wir fort. Als nächstes implementieren wir die Funktion zur automatischen Aktualisierung der Zeit. Zuerst geben wir einen Container:

<div id="box"></div> 

Um eine automatische Zeitaktualisierung zu erreichen, müssen Sie einen Timer (setInterval() oder setTimeout()) verwenden. Die erste Methode wird immer ausgeführt, es sei denn, der Timer ist gelöscht nur ausgeführt Es wird nicht einmal ausgeführt. Wenn Sie möchten, dass es ständig ausgeführt wird, können Sie die Verwendung der rekursiven Aufrufmethode in Betracht ziehen. Diese Methode wird hier nicht geschrieben

Wir entscheiden uns für die erste:

var oBox = document.getElementById("box"); //获取元素
Timer(oBox); //这里需要先执行一下，因为如果不先执行，定时器会有一个延迟1秒执行，看上去就感觉慢了一秒出来一样
oBox.timer = setInterval(function(){ //oBox.timer这种写法是为了减少外面全局变量对定时器的影响，用元素的自定义属性还可以避免命名冲突
Timer(oBox);
},1000); 

Zu diesem Zeitpunkt kann die auf der Seite angezeigte Zeit automatisch aktualisiert und angezeigt werden. Wir haben jedoch noch eine weitere Anforderung: Klicken Sie erneut auf die Zeit, und die Zeit wird erneut aktualisiert. Wie geht das? Um das Verständnis zu erleichtern, gebe ich Ihnen ein Beispiel, und Sie sollten es verstehen können. Wenn ich den Schalter drücke, geht das Licht an Das Licht geht aus. Entspricht es unseren Anforderungen, sodass wir den gewünschten Effekt erzielen können, indem wir einen Schalter setzen:

var offOn = true;
oBox.onclick = function(){
if(offOn){
clearInterval(oBox.timer);
offOn=false;
}else{
oBox.timer = setInterval(function(){
Timer(oBox);
},1000);
offOn = true;
}
} 

Zu diesem Zeitpunkt sind alle Funktionen implementiert. Glauben Sie, dass dies das Ende ist? sicherlich. . . Nein, aufgrund der strengen Einstellung unserer Programmierer zum Code können viele Stellen optimiert werden. Alle Codes sind wie folgt organisiert und optimiert:

var oBox = document.getElementById("box");
var offOn = true;
Timer(oBox);
function showTime(){
oBox.timer = setInterval(function(){
Timer(oBox);
},1000);
}
showTime();
oBox.onclick = function(){
offOn ? clearInterval(oBox.timer) : showTime();
offOn=!offOn;
}
function Timer(obj){
var nowDate = new Date();
var time = {
year : nowDate.getFullYear(),
month : nowDate.getMonth(),
day : nowDate.getDate(),
week : nowDate.getDay(),
hour : nowDate.getHours(),
minute : nowDate.getMinutes(),
second : nowDate.getSeconds()
};
function Week(num){
switch(num){
case 1 :
return '星期一';
break;
case 2 :
return '星期二';
break;
case 3 :
return '星期三';
break;
case 4 :
return '星期四';
break;
case 5 :
return '星期五';
break;
case 6 :
return '星期六';
break;
case 7 :
return '星期日';
break; 
};
}
function twoNum(num){
return num = num<10 &#63; '0'+num : num; 
}
obj.innerHTML = time.year+'年'+time.month+'月'+time.day+'日 '+Week(time.week)+' '+time.hour+':'+twoNum(time.minute)+':'+twoNum(time.second);
}

Bitte versuchen Sie, die verschiedenen darin verwendeten ternären Operationen und Negationsoperationen zu verstehen!

Glauben Sie, dass es jetzt vorbei ist? sicherlich. . . Nein, wenn es um die Anzeige der Zeit geht, ist dies nur ein Tropfen auf den heißen Stein von Zeitobjektanwendungen, z. B. Gruppenkauf-Websites, z. B. Countdowns für Bestätigungscodes usw. Die heutige Zeit ist jedoch begrenzt. Deshalb werde ich dieses Mal nicht näher auf die Countdown-Funktion eingehen, um einige Anwendungsmethoden für den Countdown zu erläutern , das war's für heute!

Ich werde Ihnen auf der Seite das relevante Wissen über die Ausgabe des aktuellen Clientzeit-Javascript-Beispielcodes vorstellen und hoffe, dass es für alle hilfreich ist!