Utilisation de la Date () d’objet pour créer une horloge

Méthodes Date Objet

Il semble que la plupart des gens veulent être conscient de la date et l’heure. Il est presque une obsession à ce que doit être satisfaite. Il était donc sans surprise que les systèmes d’exploitation ont commencé à afficher l’heure sur le bureau de l’utilisateur afin de ne pas rater leur émission préférée pendant que tuer le temps sur l’ordinateur.

La Date () objet est une fonction JavaScript grande pour manipuler la date et l’heure pour répondre à un format particulier. JavaScript utilisateurs peuvent rapidement créer des fonctions pour l’utilisation dans une variété de méthodes. Voici un exemple par exemple:

Le dateToday par exemple peuvent désormais accéder à toutes les méthodes au sein de la Date () objet. Les méthodes au sein de la Date () objets de lire les données depuis le PC – année, mois, jours, heures, minutes et secondes. Il existe de nombreuses méthodes qui peuvent être utilisés par le codeur JavaScript pour extraire les données requises. Les plus courants semblent être:

getDate () – jour du mois
getDay () – jour de la semaine
getHours () – l’heure
getMinutes () – les procès-verbaux
getSeconds () – la seconde
getMonth () – le mois
getFullYear () – l’année à quatre chiffres

Puis il ya la possibilité d’attribuer des valeurs:

setDay () – régler le jour
setHours () – Définit l’heure
setMinutes () – régler les minutes
setSeconds () – Définit les secondes
setMonth () – Définit le mois
setFullYear () – Définit l’année à 4 chiffres

Il ya une foule d’autres fonctions. Pour cet article, et son but, cela aidera le codeur vouloir venir à bout de la Date () objet.

Alors, quel est le temps?

Deux autres aspects qui doivent être notés ici sont la capacité de l’objet Date pour afficher UTC ou temps universel coordonné et aussi GMT ou Greenwich Mean Time. Cette valeur UTC est mesuré en millisecondes depuis Janvier 1, 1970, à partir de minuit. Ce comportement existe sur toutes les plateformes OS et est donc universellement accepté par le code JavaScript. Lorsque l’année est concerné, getFullYear () assiste dans le bon format en utilisant quatre chiffres pour éviter les dates avant 2000 deviennent inexactes. L’année 1997 devrait être entré comme 1997 et non 97, qui utilise uniquement les deux derniers chiffres.

Un autre point à noter ici est ce qui se passe lors de l’interprétation par JavaScript. Gardez à l’esprit que 280 secondes est interprété comme 4 minutes et 40 secondes. Le Macromedia Flash Player et d’autres applications utilisent tous les propriétés de l’objet Date pour extraire la date et l’heure du système d’exploitation, si elle est une plate-forme Mac ou Windows. Il ya un couple de légères différences ici entre les systèmes d’exploitation sur un Mac et un PC. Il est l’absence d’une base de données de fuseau horaire sur les systèmes Mac OS 8 et 9, de sorte Saving Time DST ou avancée n’est pas déclaré correctement. Ceci a été corrigé sur les systèmes Mac OS X. Sur les systèmes Windows sur les PC, le réglage DST se fait automatiquement.

Pourquoi est-il que le psychisme humain est tellement obsédé par le temps de toute façon, causant des programmeurs d’avoir à répondre à ce besoin? Il est bon pour les sites web que l’objet Date est créé. Les gens passent tellement de temps sur leur ordinateur ces jours-ci, si elle est à des fins de travail ou tout simplement pur amusement. Etre date et l’heure consciente aide un compte à quelle heure il est sur une base régulière. Il est toujours là dans le coin en bas à droite dans la barre d’état système sur les systèmes d’exploitation Windows.

Maintenant, sur les pages web, il est devenu omniprésent en tant que concepteurs de plus en plus nombreuses à vouloir utiliser l’objet Date à laisser leurs visiteurs connaître l’heure. Jours peut être complexe. Une réunion peut être prévue; son anniversaire doit être planifiée; est-il temps de quitter le travail encore et rentrer à la maison et se détendre? Bien sûr, il ne faut pas oublier combien il est important de ne pas rater un épisode de « Lost » ou « 24″ à cause de brancher être dans le moniteur d’ordinateur. L’objet Date s’applique à notre besoin constant d’information tout au long de la journée.

Il ya d’autres méthodes qui utilisent la Date () d’objet, mais pour cet article, une promenade à travers la façon de manipuler l’objet à produire certains formats de date et de l’horloge sera explorée.

Un exemple d’horloge en direct

Dans cette section, l’article ne décrivent comment afficher l’heure sur une page web alors que la section suivante montre certains formats qui peuvent être atteints.

Aujourd’hui, certains principes sont nécessaires formatage Où horloges sont concernés, le format reconnu est en heures, minutes, secondes, comme ceci:. 21:38:45. Donc, voici le code:

Nous arrivons à la partie sous forme d’une seconde. Ce sera maintenant donner l’heure un format reconnaissable pour tout spectateur de la page Web. Une horloge et une date sont belles additions en temps réel à n’importe quelle page web. Le format sera donc de:

09:10:35

Bien sûr, nous nous rendons compte assez rapidement qu’il ya une horloge statique sur l’écran. Ce n’est pas vraiment un moyen efficace « live » l’horloge comme décrit! Ne pas s’inquiéter, car il ya une méthode appelée méthode setInterval () qui va résoudre ce problème. La solution n’est pas aussi complexe qu’il n’y paraît. La plupart des codeurs sont familiers avec les boucles dans le code. Eh bien, d’une façon similaire, le code doit ici pour appeler le liveclock function () à chaque seconde pour qu’elle cesse mises à jour par la seconde comme une horloge en direct. Comme il ya 1000 millisecondes dans une seconde setInterval () est positionné à cette valeur.

Maintenant, une ligne de code a déjà traité plaçant l’heure sur la zone de texte formulaire. Il est l’horloge nom qui est le nom de la forme, et Showtime qui est le nom de la boîte de texte.

En utilisant la hiérarchie sous forme de base, la valeur de Livetime est placé dans la zone de texte.

Dans le code HTML de la page, décider où l’horloge est d’être placé et insérer:

Maintenant, nous allons regarder de plus près et que briser la logique appliquée ici.

1. Une instance de la Date () objet appelé datetoday est créé et affecté cette valeur à la thehour variables, themin, thesec et Livetime. N’hésitez pas à changer les noms des variables pour les cas comme vous s’il vous plaît. Ceci est juste un exemple.
2. Ensuite, en utilisant la hiérarchie sous forme de base, le temps a été affiché dans une boîte de texte standard en plaçant les chiffres Livetime dans la valeur zone de texte.
3. Ensuite, l’intervalle est nécessaire pour exécuter une boucle qui serait rafraîchir le temps d’horloge toutes les 1000 millisecondes ou secondes.

Où sont concernés millisecondes d’un objet date peut être écrite comme:

Utiliser Date.parse (), il est possible d’afficher le nombre de millisecondes d’une chaîne de date. Voici un exemple de format avec la valeur retournée calculés et placés dans Aujourd’hui.

Une date Exemple utiles Format

Voici un moyen rapide et simple d’y faire afficher la date:

Tout cela est très bien, comme nous avons maintenant une date affichée. Pour la dernière partie de ce tutorial, cependant, un exemple de formatage supplémentaire sera montré pour l’affichage de date. En premier lieu, la date peut encore être formaté pour plus de clarté. Par exemple, plutôt que d’afficher une date 27-08-07, pourquoi ne pas indiquer le mois en affichant 27-août-2007. Ceci peut être accompli en utilisant des tableaux et des getMonth () fonction.

Codeurs script se souviendra le format de tableau et comment il est utilisé. Dans le cas où il ya une certaine révision nécessaire ici, il ya un mois variable appelée utilisé pour contenir les mois de l’année. Le mois variable appelée est créé pour stocker les mois de l’année dans le constructeur de tableau. Pour point les noms des mois dans le tableau, le code utilise getMonth ().

Par exemple, getMonth reviendrait le chiffre 7 pour août. Ainsi, dans la dernière ligne où il est dit mois [themonth], pour août, themonth = 7. Le tableau fait son travail ici, en devenant mois [7] et que les points de l’emplacement de tableau à août. Tenez, c’est le numéro 7. Sûrement, août est le huitième mois de l’année! Mais rappelez-vous comment manipuler les nombres des tableaux, ils commencent à partir de 0 et non 1.

Ceci conclut le survol de la date () l’objet et quelques conseils utiles sur la façon dont il peut être utilisé. C’est toujours une belle touche d’insérer un affichage de l’heure et la date direct sur une page web.