CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 02 11 23:49:48

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Date & Heure

> UNE HEURE GRAPHIQUE SIMPLE EN JAVASCRIPT

UNE HEURE GRAPHIQUE SIMPLE EN JAVASCRIPT

Information sur la source

Note :

5,50 / 10

Catégorie :Date & Heure Classé sous :heure, graphique, dynamique, images, rafraichissement Niveau :Débutant Date de création :08/05/2007 Vu / téléchargé :16 323 / 1 590

Auteur : reynum

Ecrire un message privé

Commentaire sur cette source (4)

Ajouter un commentaire et/ou une note

Description

ce code affiche des images toutes les secondes dans le cas présent ces images sont pour une heure dynamique

Source

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript">
<!--
function getTmp(){ //rècupere l'heure courante toutes les secondes
var temps = new Date();
var heures = temps.getHours();
var minutes = temps.getMinutes();
var secondes = temps.getSeconds();
document.Heure.src = getImg(heures);
document.DP1.src = getImg(60);
document.Minute.src = getImg(minutes);
document.DP2.src = getImg(60);
document.Seconde.src = getImg(secondes);
setTimeout("getTmp()",1000);
}
function getImg(img) { //dans laquelle getTmp() vas chercher les images
var mem;
switch(img) {
case 0 : mem = "heure/00.png"; break;
case 1 : mem = "heure/01.png"; break;
case 2 : mem = "heure/02.png"; break;
case 3 : mem = "heure/03.png"; break;
case 4 : mem = "heure/04.png"; break;
case 5 : mem = "heure/05.png"; break;
case 6 : mem = "heure/06.png"; break;
case 7 : mem = "heure/07.png"; break;
case 8 : mem = "heure/08.png"; break;
case 9 : mem = "heure/09.png"; break;
case 10 : mem = "heure/10.png"; break;
case 11 : mem = "heure/11.png"; break;
case 12 : mem = "heure/12.png"; break;
case 13 : mem = "heure/13.png"; break;
case 14 : mem = "heure/14.png"; break;
case 15 : mem = "heure/15.png"; break;
case 16 : mem = "heure/16.png"; break;
case 17 : mem = "heure/17.png"; break;
case 18 : mem = "heure/18.png"; break;
case 19 : mem = "heure/19.png"; break;
case 20 : mem = "heure/20.png"; break;
case 21 : mem = "heure/21.png"; break;
case 22 : mem = "heure/22.png"; break;
case 23 : mem = "heure/23.png"; break;
case 24 : mem = "heure/24.png"; break;
case 25 : mem = "heure/25.png"; break;
case 26 : mem = "heure/26.png"; break;
case 27 : mem = "heure/27.png"; break;
case 28 : mem = "heure/28.png"; break;
case 29 : mem = "heure/29.png"; break;
case 30 : mem = "heure/30.png"; break;
case 31 : mem = "heure/31.png"; break;
case 32 : mem = "heure/32.png"; break;
case 33 : mem = "heure/33.png"; break;
case 34 : mem = "heure/34.png"; break;
case 35 : mem = "heure/35.png"; break;
case 36 : mem = "heure/36.png"; break;
case 37 : mem = "heure/37.png"; break;
case 38 : mem = "heure/38.png"; break;
case 39 : mem = "heure/39.png"; break;
case 40 : mem = "heure/40.png"; break;
case 41 : mem = "heure/41.png"; break;
case 42 : mem = "heure/42.png"; break;
case 43 : mem = "heure/43.png"; break;
case 44 : mem = "heure/44.png"; break;
case 45 : mem = "heure/45.png"; break;
case 46 : mem = "heure/46.png"; break;
case 47 : mem = "heure/47.png"; break;
case 48 : mem = "heure/48.png"; break;
case 49 : mem = "heure/49.png"; break;
case 50 : mem = "heure/50.png"; break;
case 51 : mem = "heure/51.png"; break;
case 52 : mem = "heure/52.png"; break;
case 53 : mem = "heure/53.png"; break;
case 54 : mem = "heure/54.png"; break;
case 55 : mem = "heure/55.png"; break;
case 56 : mem = "heure/56.png"; break;
case 57 : mem = "heure/57.png"; break;
case 58 : mem = "heure/58.png"; break;
case 59 : mem = "heure/59.png"; break;
case 60 : mem = "heure/DP.png"; break;
}
return mem;
}
//-->
</script>
</head>
<body onload= "getTmp()">
<table><tr><td>
<img id="Heure" /><img id="DP1" /><img id="Minute" /><img id="DP2" /><img id="Seconde" />
</table></tr></td>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script language="javascript">
<!--

function getTmp(){ //rècupere l'heure courante toutes les secondes

var temps = new Date();

var heures = temps.getHours();
var minutes = temps.getMinutes();
var secondes = temps.getSeconds();

  document.Heure.src = getImg(heures);
  document.DP1.src = getImg(60);
  document.Minute.src = getImg(minutes);
  document.DP2.src = getImg(60);
  document.Seconde.src = getImg(secondes);
  
  setTimeout("getTmp()",1000);

}

function getImg(img) { //dans laquelle getTmp() vas chercher les images

  var mem;
  
  switch(img) {
  
		case 0 : mem = "heure/00.png"; break;
		case 1 : mem = "heure/01.png"; break;
		case 2 : mem = "heure/02.png"; break;
		case 3 : mem = "heure/03.png"; break;
		case 4 : mem = "heure/04.png"; break;
		case 5 : mem = "heure/05.png"; break;
		case 6 : mem = "heure/06.png"; break;
		case 7 : mem = "heure/07.png"; break;
		case 8 : mem = "heure/08.png"; break;
		case 9 : mem = "heure/09.png"; break;
		case 10 : mem = "heure/10.png"; break;
		case 11 : mem = "heure/11.png"; break;
		case 12 : mem = "heure/12.png"; break;
		case 13 : mem = "heure/13.png"; break;
		case 14 : mem = "heure/14.png"; break;
		case 15 : mem = "heure/15.png"; break;
		case 16 : mem = "heure/16.png"; break;
		case 17 : mem = "heure/17.png"; break;
		case 18 : mem = "heure/18.png"; break;
		case 19 : mem = "heure/19.png"; break;
		case 20 : mem = "heure/20.png"; break;
		case 21 : mem = "heure/21.png"; break;
		case 22 : mem = "heure/22.png"; break;
		case 23 : mem = "heure/23.png"; break;
		case 24 : mem = "heure/24.png"; break;
		case 25 : mem = "heure/25.png"; break;
		case 26 : mem = "heure/26.png"; break;
		case 27 : mem = "heure/27.png"; break;
		case 28 : mem = "heure/28.png"; break;
		case 29 : mem = "heure/29.png"; break;
		case 30 : mem = "heure/30.png"; break;
		case 31 : mem = "heure/31.png"; break;
		case 32 : mem = "heure/32.png"; break;
		case 33 : mem = "heure/33.png"; break;
		case 34 : mem = "heure/34.png"; break;
		case 35 : mem = "heure/35.png"; break;
		case 36 : mem = "heure/36.png"; break;
		case 37 : mem = "heure/37.png"; break;
		case 38 : mem = "heure/38.png"; break;
		case 39 : mem = "heure/39.png"; break;
		case 40 : mem = "heure/40.png"; break;
		case 41 : mem = "heure/41.png"; break;
		case 42 : mem = "heure/42.png"; break;
		case 43 : mem = "heure/43.png"; break;
		case 44 : mem = "heure/44.png"; break;
		case 45 : mem = "heure/45.png"; break;
		case 46 : mem = "heure/46.png"; break;
		case 47 : mem = "heure/47.png"; break;
		case 48 : mem = "heure/48.png"; break;
		case 49 : mem = "heure/49.png"; break;
		case 50 : mem = "heure/50.png"; break;
		case 51 : mem = "heure/51.png"; break;
		case 52 : mem = "heure/52.png"; break;
		case 53 : mem = "heure/53.png"; break;
		case 54 : mem = "heure/54.png"; break;
		case 55 : mem = "heure/55.png"; break;
		case 56 : mem = "heure/56.png"; break;
		case 57 : mem = "heure/57.png"; break;
		case 58 : mem = "heure/58.png"; break;
		case 59 : mem = "heure/59.png"; break;
		case 60 : mem = "heure/DP.png"; break;
  }

return mem;

}

//-->
</script>

</head>
<body onload= "getTmp()">

<table><tr><td>
<img id="Heure" /><img id="DP1" /><img id="Minute" /><img id="DP2" /><img id="Seconde" />
</table></tr></td>

</body>
</html>

Conclusion

Bien entendu il vous faut un répertoire nommé heure/ , qui contiendra les images (ici en "png") nommées de 00.png à 59.png et une DP.png pour les deux points ;-).
(Il est asser facile et rapide de créer ces images avec photoshop ou gimp ou tout autres logiciels utilisant les calques)

Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

heure.html 3 457 octets
heure
- 00.png 6 691 octets
- 01.png 6 421 octets
- 02.png 6 773 octets
- 03.png 6 605 octets
- 04.png 6 522 octets
- 05.png 6 551 octets
- 06.png 6 499 octets
- 07.png 6 357 octets
- 08.png 6 637 octets
- 09.png 6 455 octets
- 10.png 6 183 octets
- 11.png 5 798 octets
- 12.png 6 331 octets
- 13.png 5 990 octets
- 14.png 5 865 octets
- 15.png 5 963 octets
- 16.png 5 885 octets
- 17.png 5 695 octets
- 18.png 5 983 octets
- 19.png 5 861 octets
- 20.png 6 504 octets
- 21.png 6 199 octets
- 22.png 6 389 octets
- 23.png 6 337 octets
- 24.png 6 317 octets
- 25.png 6 316 octets
- 26.png 6 228 octets
- 27.png 6 128 octets
- 28.png 6 369 octets
- 29.png 6 216 octets
- 30.png 6 491 octets
- 31.png 6 089 octets
- 32.png 6 524 octets
- 33.png 6 313 octets
- 34.png 6 210 octets
- 35.png 6 260 octets
- 36.png 6 199 octets
- 37.png 6 054 octets
- 38.png 6 341 octets
- 39.png 6 180 octets
- 40.png 6 515 octets
- 41.png 6 123 octets
- 42.png 6 547 octets
- 43.png 6 302 octets
- 44.png 6 133 octets
- 45.png 6 303 octets
- 46.png 6 200 octets
- 47.png 6 078 octets
- 48.png 6 386 octets
- 49.png 6 205 octets
- 50.png 6 474 octets
- 51.png 6 130 octets
- 52.png 6 623 octets
- 53.png 6 316 octets
- 54.png 6 229 octets
- 55.png 6 278 octets
- 56.png 6 196 octets
- 57.png 6 054 octets
- 58.png 6 397 octets
- 59.png 6 176 octets
- DP.png 3 824 octets

Télécharger le zip

Sources du même auteur

PETIT SCRIPT DE CHANGEMENT (COMMUTATION) D'IMAGE EN FONCTION...

Toutes les sources de reynum

Sources de la même categorie

CALENDRIER ANNUEL UNIVERSEL AVEC SAINTS DU CALENDRIER ET FÊT... par 007Julien

OBTENIR LE NOMBRE DE JOURS D'UN MOIS SUIVANT SON ANNÉE par hugolegrand

SAINT DU JOUR par tefa24600

NIPCLOCK 1.2 par neep

COMPTE À REBOURS POUR ÉVÉNEMENTS À RÉPÉTITION par CSIBern

Toutes les sources de la catégorie Date & Heure

Sources en rapport avec celle ci

CALCULATRICE HEURE par m22001111

GALERIE PHOTO DYNAMIQUE EN JAVASCRIPT "JQUERY" par zertyx

[-CLASS-] -> CARROUSSEL D'IMAGES par TheWeasel47

DYNAMIQUE.JS POUR FAIRE DE JOLIE ANIMATION )) par Kimjoa

BARRE DE DÉFILEMENT PERSONNALISÉE STYLE MAGIQUE par abdelaziz_info

Commentaires et avis

Commentaire de bultez le 08/05/2007 13:48:17

ça part d'un bon sentiment. mais déjà :
_ 10 images seraient suffisantes ( de 0 à 9 )
_ on peut "facilement" éviter le switch avec 60 case
_ affichage de l'heure toutes les secondes : est-ce nécessaire ?
_ de nombreux exemples existent déjà
_ ...
Cordialement.

Commentaire de reynum le 23/05/2007 17:47:52

C'est vrais pour les images d'ailleur dés que j'aurais le temps je vais refaire le code pour 11 images (0 à 9 avec les deux points).
De plus je pense que certaines personnes (moi par exemple) aime avoir une jolie horloge en temps réel sur leur site.
Je sais que de nombreux codes existent déja mais celui-la c'est le mien et je l'aime bien en plus je le trouve plus clair que beaucoup d'autres que j'ai eu l'occasion de voir.
Voilou @++

Commentaire de reynum le 13/06/2007 09:59:21

En fait si on veut faire vraiment jolis, avec des polices spéciales, des effets d'ombrages... Il faut les 61 images, car si on en met juste 11 elles ne sont pas bien liées entre elle (il y a trop d'espace quand les chiffres sont > 10)et c'est moins joli voir laid.
Donc je garde cette solution qui est simple et fonctionne parfaitement.

Commentaire de rrk275 le 18/06/2007 00:59:23

ce que bultez disait ( entre autres .. ):

function getImg(img)
{
  if(img >= 10 )
    return "heure/"+img+".png" ;
  return "heure/0"+img+".png" ;
}

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

Menu dynamique a gauche avec images [ par YouTzeEN ] Salut à tous Bon, voila je suis un tres gros newbie ...Je cherche a faire un menu dynamique a gauche avec des images ...Voila en fait, j'aurai be Chargement dynamique d'images [ par Kevin.Ory ] Bonjour à tous,Je voudrais créer une galerie d'image avec un effet de fondu lors du changement de l'image affiché. Hors je ne voudrais pas précharger Création d'une galerie d'images dynamique [ par joujou0000 ] j ai besoin de votre aide s-v-p, je suis debutant et je veux créer un site web contenant une galrie de photos dynamique avec du XHTML et du JAVASCRIPT Insérer une image selon un résultat mathématique [ par tweeder ] Bonjour,Je m'explique car mon sujet n,est pas très révélateur. Je dois créer une page qui fait des calculs mathématiques et jai pensé insérer des imag images [ par sebguess ] j'ai un script qui permet d'ouvrir mes images dans une page popup mais je sia pa comment desactivé le clic droits dans cette page je pense qu'il faut suppression du menu [ par sebguess ] j'ai besoin maintenant de pouvoir enlever le meu qui apparait sous IE6 (enregistrer,imprimer...)quand on pointe la souris sur l'imagemerci pour vos re Images, Organisation, [ par Hamzamaa ] Salut à tous,J'aimerai bien savoir comment écrire le code en Php me permettant d'afficher un certain nombre d'images au même format dans une page web. Verif d'une date et d'une heure [ par Sinse ] Salut! Voila j'ai un truc plutot bizarre qui se passe : j'ai une procedure de verification de date qui marche correctement, dans la meme function je v Menu dynamique [ par RapAttak ] BonjourJe souhaite intégrer un menu dynamique sur mon site et j'aimerais beaucoup avoir le meme menu que vous utilisez sur www.javascript.com.Je n'arr Taille des images variable selon la taille de la fenetre ou la résolution [ par motenai ] Salut,En fait, j'aimerais trouver le moyen pour que mes images changent toutes seules de taille soit selon la résolution de l'écran soit selon la tail

Nos sponsors

Derniers Blogs

SESSION SILVERLIGHT 5 3D : SLIDES ET DEMOS par Groc

[TECHDAYS 2012] SESSION WEBMATRIX 2 : LE COUTEAU SUISSE GRATUIT POUR VOS DéVELOPPEMENTS WEB - SLIDES par gpommier

[SHAREPOINT] LES SESSIONS TECHDAYS 2012. par Patrick Guimonet

TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3 par ROMELARD Fabrice

MISHRA READER : UN LECTEUR RSS TRèS ZUNE STYLE EN OPEN SOURCE ! par Vko

Forum

RE : RéCUPéRER LA VALEUR D'UNE VARIABLE PHP POUR L'UTILISER EN JAVASCRIPT par stealone

RE : TRANSFARMATION DES VARIABLES par marlopremier

RE : ADAPTER UN SCRIPT POUR IE6 par Ewan83

ADAPTER UN SCRIPT POUR IE6 par Ewan83

RE : CREATION DE SCORING OU RATING par Alex16000

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Passerelle Pericles sur site Joomla 17
Budget : 499€
Infogerance Serveur Debian Linux
Budget : 2 400€
Developpeur applications iphone - ipad - android
Budget : 800€

Logiciels

PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)

PONAMEDIA TV DEVIENS HELLLOOO FLASH LA TV SUR VOTRE ORDINATEUR. Toute une plateforme Multi...

Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO
Academy System (17.2.1.0)
ACADEMY SYSTEM (17.2.1.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System
Easy-Planning (1.0.0.1)
EASY-PLANNING (1.0.0.1)

Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ...

Cliquez pour télécharger Easy-Planning
COLLECTOR PLUS (3.00B)
COLLECTOR PLUS (3.00B)

COLLECTOR PLUS version 3.00B est un logiciel utilisant une base de données alimentée par : - L...

Cliquez pour télécharger COLLECTOR PLUS
LettresFaciles 2011 (8.0.0.1)
LETTRESFACILES 2011 (8.0.0.1)

LettresFaciles est un logiciel facilitant la création et la rédaction de lettres types. Son inte...

Cliquez pour télécharger LettresFaciles 2011