Horloge (date et heure) en temps réel et affichage texte avec choix du format d'affichage (7 pour l'instant) de la date et d

Soyez le premier à donner votre avis sur cette source.

Snippet vu 57 654 fois - Téléchargée 30 fois

Contenu du snippet

Fonctionnement : Script simple (niveau débutant) permettant l'affichage au format texte de la date et l'heure en temps réel. Il permet l'affichages de plusieurs "horloges" à des endroits différents (rien d'exceptionnel je sais) sous différents formats (7 plus exactement mais on pourrais en faire +) (exemple: 2005/12/20, 12/20/2005 14:30:25...). En combinant tous les formats de date et heure on a donc un certain nombre de combinaison pour l'affichage de la date et de l'heure
Voila je trouvais ca utile lorsque l'on fais plusieurs sites internet (ou autre...) et ca m'a permis de progresser en javascript!!!

Les points que je trouve intéressants:
-récupération de n paramètres définit dans les arguments de la fonction namosw_init_clock() lors du chargement de la page
-utilisation de l'objet document.getElementById("valeur1").innerHTML qui permet d'afficher une chaine de caractère dans une balise (ici span) ayant comme id "valeur1"
-utilisation de la fonction setTimeout("namosw_clock();", 1000); permettant d'executer la fonction namosw_clock() toutes les 1000 ms soit toutes les secondes
-chargement du type et de la localisation de chaque horloge ainsi que chargement des tableaux définissants le nom du mois
//ainsi que le nom du jours au chargement de la page ce qui permet de gagner un peu de temps lors de l'execution de la fonction chargé du calcul de la date et de l'affichage (fonction namosw_clock())

Source / Exemple :


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>date / horloge</title>
<script language="JavaScript">
<!--
function namosw_init_clock()
{
//*************************************Expliquation sur le fonctionnement du script***********************************
//Ce programme permet de créer une horloge en temps réel
//On peut définir autant d'horloge que l'on souhaite (sur une même page) chaqu'une d'entre elle doit être definie par 2 paramètres le premier
//permet de définir l'id de la balise span dans laquelle l'horloge apparaitra et le second paramètre permet de definir
//le type d'horloge à utiliser
//7 types d'horloge peuvent être affichées
//********************************************************************************************************************
//Cette fonction permet de charger les paramètres qui définissent les différentes horloges (localisation et type de l'horloge)
//ainsi que le contenu des tableaux contenant les noms des jours et des mois lors du chargement de la page

  var type, i, top, obj, clocks, strobj, tempvar;
  clocks = new Array();
  //Permet de récupérer les n argument définits dans les paramètres de la fonction namosw_init_clock() lors du chargement de la page
  for (i = 0, top = 0; i < namosw_init_clock.arguments.length; i += 2)//ici on extrait chaque paramètre définit dans la fonction namosw_init_clock() lors du chargement de la page et on les places dans un tableau objet
  	{
  	//namosw_init_clock.arguments[i]  : paramètre i définit dans les arguments de la fonction namosw_init_clock(argument1, argument2,...)
    strobj = eval('document.getElementById("' + namosw_init_clock.arguments[i] + '")');//Permet de définir l'objet dans lequel sera afficher l'horloge sur la page html à partir des paramètres paires définit dans la fonction lors du chargement de la page
    type = namosw_init_clock.arguments[i+1];
    if (type < 1 && 7 < type) continue;
    clocks[top++] = strobj;
    clocks[top++] = type;
  	}
  //*****************definition des tableau contenant les noms des mois et des jours****************
  clocks.months = new Array('Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet',
                            'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre');
  clocks.days   = new Array('Dimanche', 'Lundi', 'Mardi', 'Mercredi',
                            'Jeudi', 'Vendredi', 'Samedi');
  //************************************************************************************************
  if (top > 0)
  	{
    document.namosw_clocks = clocks;
    namosw_clock();
  	}
}

function namosw_clock()
{
//fonction permettant l'affichage des différentes horloges suivant les différents formats ainsi que les différents endroits
//(au niveau des balises span) ainsi que le lancement de l'execution toutes les secondes
  var i, type, clocks, next_call, str, hour, ampm, now, year2, year4;
  clocks = document.namosw_clocks;
  if (clocks == null) return;
  next_call = false;
  //affichage de toutes les horloges en fonction du type et de l'id de la balise span dans laquelle l'horloge sera affiché
    for (i = 0; i < clocks.length; i += 2) {
    obj   = clocks[i];//objet dans lequel sera affiché la n ième horloge
    type  = clocks[i+1];//type d'affichage de la n ième horloge
    now   = new Date();
    year2 = now.getYear();
    year4 = year2;
    if (year2 < 1000) year4 = 1900 + year2;
    if (year2 >= 100) year2 = year4;
	//définition des formats en fonction du type 1,2,3,4...
	//remarque : document.getElementById("type1").innerHTML permet d'afficher la date ou l'heure au niveau de la balise span ayant comme id type1
    if (type == 1 || type == 2)
    	{
      	obj.innerHTML = now.getDate() + ' ' + clocks.months[now.getMonth()] + ' ' + year4;
      	if (type == 2) 
        	obj.innerHTML = clocks.days[now.getDay()] + ' ' + obj.innerHTML;
    	}
    else if (type == 3 || type == 4)
    	{
      	obj.innerHTML = year2 + '/' + (now.getMonth()+1) + '/' + now.getDate();
    	}
    else if (type == 5 || type == 6)
    	{
      	obj.innerHTML = (now.getMonth()+1) + '/' + now.getDate() + '/' + year2;
    	} 
    
    if (type == 4 || type == 6 || type == 7)
    	{
      	hour = now.getHours();
      	ampm = 0;
      	//Dans cette ligne on teste aussi si les minutes et(ou) les secondes sont <10 si c'est le cas on concatène un 0 devant 
      	//l'heure et(ou) les secondes (on pourrait faire la même chose avec les heures 
      	str = hour +':'+ ((now.getMinutes() < 10) ? '0'+now.getMinutes():now.getMinutes()) +':'+ ((now.getSeconds() < 10) ? '0'+now.getSeconds():now.getSeconds());
      	if (type == 7) 
      		{
      		obj.innerHTML  = str;
      		}
      	else
      		{
      		obj.innerHTML += ' ' + str;
      		}
    	}
    //si on utilise l'affichage de l'heure on met la variable next_call a true afin d'executer (settimeout) la fonction namosw_clock()
    //toutes les secondes (1000 millisecondes) pour obtenir l'affichage des secondes en temps réel
    if (type == 4 || type == 6 || type == 7)
    	next_call = true;
  }//fin for
  if (next_call)
    window.setTimeout("namosw_clock();", 1000);
}//fin fonction
// -->
</script>
</head>
<body OnLoad="namosw_init_clock('type1', 1, 'type2', 2, 'type3', 3, 'type4', 4, 'type5', 5, 'type6', 6, 'type7', 7)">
<p>type1 : <span id="type1"></span></p>
<p>type2 : <span id="type2"></span></p>
<p>type3 : <span id="type3"></span></p>
<p>type4 : <span id="type4"></span></p>
<p>type5 : <span id="type5"></span></p>
<p>type6 : <span id="type6"></span></p>
<p>type7 : <span id="type7"></span></p>
</body>
</html>

Conclusion :


Voir l'application du script dans les quelques lignes html présentent dans le code source.
(pour tester le fonctionnement copier le code complet dans un fichier .htm et l'ouvrir avec le navigateur web)

A voir également

Ajouter un commentaire

Commentaires

Messages postés
9
Date d'inscription
mercredi 2 septembre 2009
Statut
Membre
Dernière intervention
11 juin 2014

@newo fait sa:
"dans le
<script type="text/javascript">
<!-- //start
//######################################################################################
// NOTE: the month entered must be one less than current month. ie; 0=January, 11=December
// NOTE: the hour is in 24 hour format. 0=12am, 15=3pm etc
// format: dateFuture = new Date(year,month-1,day,hour,min,sec)
// example: dateFuture new Date(2003,03,26,14,15,00) April 26, 2003 - 2:15:00 pm
dateFuture = new Date(2009,09,31,00,00,00);
//###################################
//nothing beyond this point
function GetCount(){

dateNow = new Date(); //grab current date
amount = dateFuture.getTime() - dateNow.getTime(); //calc milliseconds between dates
delete dateNow;

// time is already past
if(amount < 0){
document.getElementById('countbox').innerHTML="Happy Halloween! Suesses oder Saures ...";
}
// date is still good
else{
days=0;hours=0;mins=0;secs=0;out="";

amount = Math.floor(amount/1000);//kill the "milliseconds" so just secs

days=Math.floor(amount/86400);//days
amount=amount%86400;

hours=Math.floor(amount/3600);//hours
amount=amount%3600;

mins=Math.floor(amount/60);//minutes
amount=amount%60;

secs=Math.floor(amount);//seconds

if(days != 0){out += days +" Tag"+((days!=1)?"e":"")+", ";}
if(days != 0 || hours != 0){out += hours +" Stunde"+((hours!=1)?"n":"")+", ";}
if(days != 0 || hours != 0 || mins != 0){out += mins +" Minute"+((mins!=1)?"n":"")+", ";}
out += secs +" Sek.";
document.getElementById('countbox').innerHTML="Nur noch "+out+" bis Halloween!";

setTimeout("GetCount()", 1000);
}
}

window.onload=GetCount;//call when everything has loaded

//-->
</script>
Messages postés
3
Date d'inscription
mercredi 6 décembre 2006
Statut
Membre
Dernière intervention
27 octobre 2009

bonjour
J'ai un problème d'affichage avec ce script, il fonctionne sous internet explorer mais pas sou firefox, quelqu'un peut m'aider svp?
merci
Messages postés
9
Date d'inscription
mercredi 2 septembre 2009
Statut
Membre
Dernière intervention
11 juin 2014

bonjour :)

merci pour ce tres beau snipet !

mais en individuel, j'ai colllle :
j'ai utiliser sa :
<tr><th><script language=Javascript src = /arenas/divers/horloge.html type=text/javascript></script></th></tr>

merci pour votre aide.
arenas
Messages postés
8
Date d'inscription
vendredi 13 février 2009
Statut
Membre
Dernière intervention
25 février 2009

Réponse à moi même :
mois/jours/année : {obj.innerHTML = (now.getMonth()+1) + '/' + now.getDate() + '/' + year2;}
jour/mois/année : { obj.innerHTML = now.getDate() + '/' + (now.getMonth()+1) + '/' + year2;}

conclusion : réfléchir à deux fois avant de poster. ;)
merci encore pour ce code.
Messages postés
8
Date d'inscription
vendredi 13 février 2009
Statut
Membre
Dernière intervention
25 février 2009

super code, vraiment complet !
développeur du dimanche également, je voudrais juste changer le format de date du type 6.
c'est à dire passer du format "mois/jours/année" à "jour/mois/année".
le probleme doit se trouver sur la ligne :
{obj.innerHTML = (now.getMonth()+1) + '/' + now.getDate() + '/' + year2;}
mais quand j'intervertis bêtement les fonction… ca ne fonctionne pas… quelqu'un aurait il la solution ?
merci d'avance.
Afficher les 21 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.