Afficher l'exemple de code javascript de l'heure actuelle du client dans les compétences page_javascript

L'objet time (Date()) est relativement simple. Cet article est destiné aux débutants pour que les experts puissent l'ignorer !

Cet article présente des exemples de connaissances de base et parle des exigences des exemples :

Affiche l'heure actuelle du client sur la page (au format 10:10:10 le lundi 1er janvier 2015). La page ne s'actualise pas toutes les secondes, mais l'heure est automatiquement mise à jour (en utilisant deux méthodes de minuterie). atteint), temps de clic de souris, si le mouvement d'origine est arrêté, s'il est arrêté, le mouvement continue
;

Les exigences peuvent essentiellement être divisées en 2 parties : l'une consiste à mettre à jour automatiquement l'heure sans actualiser, et l'autre consiste à cliquer sur l'heure pour arrêter ou mettre à jour l'heure

D'accord, suivons les anciennes règles, étape par étape. Puisqu'il est temps, nous utiliserons l'objet temporel 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()
}; 

J'obtiens l'objet temporel sous la forme d'un objet, qui est pratique à appeler et qui a une structure claire. Il n'est pas nécessaire de le définir un par un. Cette méthode d'écriture est également très pratique. obtenez la valeur correspondante, par exemple obtenir l'année : heure année ;
.

Après avoir obtenu les données dont nous avons besoin, nous devons résoudre le problème du jour de la semaine, car la valeur du jour de la semaine obtenue maintenant est toujours 1,2,3,4,5,6,7 . Ici, nous devons le convertir et le changer en Pour les informations textuelles que nous pouvons voir, nous l'enveloppons ici avec une fonction :

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; 
};
}

Ici, j'utilise la combinaison swicth case. Cette condition de jugement est particulièrement adaptée pour faire des jugements similaires au jour de la semaine. Je n'entrerai pas dans les détails ici, vous pouvez également utiliser la combinaison if else pour juger. , selon vos habitudes personnelles. Un problème à résoudre est que lorsque les minutes et secondes obtenues sont comprises entre 0 et 9, les chiffres de 0 à 9 s'affichent,

n'est pas notre affichage commun de 00-09. Afin de changer cette heure en quelque chose qui nous est familier, nous pouvons également écrire une fonction pour la convertir :
.

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

J'utilise ici l'arithmétique ternaire. Si vous ne connaissez pas grand-chose à l'arithmétique ternaire, regardez le code ci-dessous, cela signifie la même chose :

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

Tout est prêt, il ne nous manque plus que le vent d’est. Intégrons d’abord ces codes pour les rendre plus pratiques à utiliser :

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);
}

Vous devez comprendre cette fonction. Le but du passage d'un objet obj est d'afficher l'heure dans cet objet. Cependant, l'heure affichée à ce moment n'est qu'une heure statique. La page ne bougera pas du tout si elle ne l'est pas. rafraîchi. Par conséquent, nous continuons. Ensuite, implémentons la fonction de mise à jour automatique de l'heure. Tout d'abord, nous donnons un conteneur :
.

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

Pour obtenir une mise à jour automatique de l'heure, vous devez utiliser une minuterie (setInterval() ou setTimeout()). La première est toujours exécutée à moins que la minuterie ne soit effacée et la seconde l'est. exécuté uniquement Elle ne sera pas exécutée une seule fois. Si vous souhaitez qu'elle soit exécutée tout le temps, vous pouvez envisager d'utiliser la méthode d'appel récursive. Cette méthode ne sera pas écrite ici
.

Nous choisissons d'utiliser le premier :

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

À ce stade, l'heure affichée sur la page peut être automatiquement mise à jour et affichée. Cependant, nous avons encore une autre exigence, qui est de cliquer sur l'heure et l'heure s'arrêtera à nouveau et l'heure reprendra la mise à jour. Alors comment faire ça ? Afin de faciliter la compréhension, je vais vous donner un exemple, et vous devriez pouvoir le comprendre. Par exemple, une lumière lorsque j'appuie sur l'interrupteur, la lumière s'allume. la lumière s'éteint. Est-ce très similaire à nos exigences, afin que nous puissions obtenir l'effet souhaité en réglant un interrupteur :

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

À ce stade, toutes les fonctions ont été implémentées. Pensez-vous que c'est la fin ? certainement. . . Non, en raison de l'attitude rigoureuse de nos programmeurs envers le code, de nombreux endroits peuvent être optimisés. Tous les codes sont organisés et optimisés comme suit :
.

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);
}

Veuillez essayer de comprendre les différentes opérations ternaires et opérations de négation qui y sont utilisées !

À ce stade, pensez-vous que c’est fini ? certainement. . . Non, lorsqu'il s'agit d'afficher l'heure, ce n'est qu'une goutte d'eau dans l'ensemble des applications d'objets temporels. Davantage d'applications devraient être des applications de compte à rebours, telles que les sites Web d'achat groupé, tels que les comptes à rebours de codes de vérification, etc. je n'entrerai donc pas dans les détails ici cette fois. Parlons de la fonction de compte à rebours. J'ouvrirai un blog séparé pour expliquer certaines méthodes d'application du compte à rebours pour votre référence et votre étude. , c'est tout pour aujourd'hui !

Je vais vous présenter les connaissances pertinentes sur la sortie de l'exemple de code javascript actuel du client sur la page. J'espère que cela sera utile à tout le monde !