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

Cliquez ici pour mettre ce site au démarrage de votre navigateur

AccueilCodesTutorielsForumsEmploiLivresGuide achatConnexion

begin process at 2009 07 06 01:20:04

SILVERLIGHT 3 : COMMUNICATION ET MULTICAST par KooKiz

[PERSO] DéCOUVERTES ESTIVALES : LINUX (PART I) par FREMYCOMPANY

[REFACTORING] RESHARPER POUR VISUAL STUDIO 2010 (PREVIEW) par tja

[REFACTORING] ANALYSER VOS EXCEPTIONS AVEC RESHARPER EXCEPTIONAL par tja

SHAREPOINT 2007 : PATTERNS & PRACTICES SHAREPOINT GUIDANCE par phil

RE : BOUCLES ! par cedcyr

BOUCLES ! par cedcyr

CODE POUR EDITEUR DE TEXTE AVEC PRISE EN CHARGE DU COPIER/COLLER GARDANT LA MISE EN FORME par lolhangman

RE : COMMENT RéCUPéRER LES VARIABLES DE PLUSIEURS FORMULAIRES POUR OUVRIR FICHIER EXCEL par Bul3

+ de logiciels à télécharger

1 464 950 membres
5 nouveaux aujourd'hui
15 046 membres club

Trouver une ressource

Trouvez une ressource parmi 40 095 codes, 1 303 044 messages d'aide etc...

Recherche: dans [ Dernières recherches ]

Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

UNE HEURE GRAPHIQUE SIMPLE EN JAVASCRIPT

Information sur la source

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é: 13 178 / 1 404

Auteur : reynum

Ecrire un message privé

Note :

5,50 / 10

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

Pour les "Membres Club", vous pouvez 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

FÊTER UN ANNIVERSAIRE AUTOMATIQUEMENT par pitoule

DATE COURANTE par nabche

UN CHAMP DE SAISIE DE DATE par guykoumba

HEURE, DATE DU JOUR DE L'INTERNAUTE ET FÊTE À SOUHAITER. par sneezy

MICRO-CALENDAR par amrounix

Toutes les sources de la catégorie Date & Heure

Sources en rapport avec celle ci

TRI DÉCROISSANT ET CROISSANT D'UN TABLEAU DYNAMIQUE REMPLIE ... par barbe91

INSTALLEZ UN CURSEUR GÉANT, SUPER GÉANT CURSEUR DE LA SOURIS... par abdelaziz_info

MENU AVEC ROULETTE par jdmcreator

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 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 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 pb de post dans un ajax à cause des accents [ par ludovicanceaux ] Salut à tous, voilà, j'essaye de faire une requète ajax en post avec un textarea, les données saisi dedans sont de ce style :Production: Bois: Defilement aleatoire d'images [ par grolix ] Bonjour,J'ai un bloc div dans lequel je souhaite faire défiler des images aléatoirements (toutes de meme taille).J'ai codé comme ça: <!DOCTYPE menu déroulant dynamique mysql [ par cobra176 ] bonjour a tous je cherche le moyen de faire 2 menu déroulant utilisant une base de données.la premier permet de faire un choix generale et l'autre plu [Aide] Select sur des images... [ par Ho0x ] Bonjours à tous, Voilà, j'ai chercher, essayer des solutions, et je ne trouve pas ce que j'aimerais.C'est assez simple, je créer un générateur de text javascript, Appeler une fonction avec un nom de fonction dynamique, equivalent à getFunctionByName [résolu] [ par sdess ] Bonjour,J'ai beaucoup cherché pour trouver cette solution, que j'ai trouvé en tatonant, alors je la documente ici :J'aivais besoin de transmettre une différences entre fonctions javascript : preloadimages et prechargimg [ par remlev ] Bonjour à tous et merci à Codes-SourceS qui aide bien les débutants comme moi.J'ai qqes petites questions:J'ai fait un site avec un menu qui contient Liste déroulante dynamique PHP/AJAX [ par Vins974 ] Bonjour à tous !!! J'ai besoin de votre aide svp .. Je crée un site , et j'ai besoin d'insérer 3 listes déroulantes dynamiques. Je m'explique <img sr