Horloge binaire led

Description

Alors voilà, c'est une simple horloge binaire inspirée d'une autre soumise il y a quelques temps. Je l'ai optimisé un peu, surtout au niveau de la présentation mais il pourrait y avoir encore beaucoup à faire et ce n'est pas très bien programmé donc n'hésitez pas à l'améliorer. Aucun bug connu.

Source / Exemple :


<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'>
<HTML>
 <HEAD>
  <TITLE>Horloge Binaire</TITLE>
  <META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=iso-8859-1'>
<script type="text/javascript" src="Horloge Binaire.js"></script>
<style type="text/css">
<!--
body {margin:0;background-color:Bisque;}
#led {top:16px;left:16px;width:353px;height:353px;position:absolute;}
#dheure1 {position:absolute;top:154px;left:70px;}
#dheure0 {position:absolute;top:198px;left:70px;}
#uheure3 {position:absolute;top:66px;left:110px;}
#uheure2 {position:absolute;top:110px;left:110px;}
#uheure1 {position:absolute;top:154px;left:110px;}
#uheure0 {position:absolute;top:198px;left:110px;}
#dmin2 {position:absolute;top:110px;left:150px;}
#dmin1 {position:absolute;top:154px;left:150px;}
#dmin0 {position:absolute;top:198px;left:150px;}
#umin3 {position:absolute;top:66px;left:190px;}
#umin2 {position:absolute;top:110px;left:190px;}
#umin1 {position:absolute;top:154px;left:190px;}
#umin0 {position:absolute;top:198px;left:190px;}
#dsec2 {position:absolute;top:110px;left:230px;}
#dsec1 {position:absolute;top:154px;left:230px;}
#dsec0 {position:absolute;top:198px;left:230px;}
#usec3 {position:absolute;top:66px;left:270px;}
#usec2 {position:absolute;top:110px;left:270px;}
#usec1 {position:absolute;top:154px;left:270px;}
#usec0 {position:absolute;top:198px;left:270px;}
//-->
</style>
 </HEAD>
 <BODY onload="showtime();">
<div id="led"><img src="Support.jpg" alt="" /></div>
<div id="dheure0"><img src="bin0.jpg" alt="" /></div>
<div id="dheure1"><img src="bin0.jpg" alt="" /></div>
<div id="uheure0"><img src="bin0.jpg" alt="" /></div>
<div id="uheure1"><img src="bin0.jpg" alt="" /></div>
<div id="uheure2"><img src="bin0.jpg" alt="" /></div>
<div id="uheure3"><img src="bin0.jpg" alt="" /></div>
<div id="dmin2"><img src="bin0.jpg" alt="" /></div>
<div id="dmin1"><img src="bin0.jpg" alt="" /></div>
<div id="dmin0"><img src="bin0.jpg" alt="" /></div>
<div id="umin3"><img src="bin0.jpg" alt="" /></div>
<div id="umin2"><img src="bin0.jpg" alt="" /></div>
<div id="umin1"><img src="bin0.jpg" alt="" /></div>
<div id="umin0"><img src="bin0.jpg" alt="" /></div>
<div id="dsec2"><img src="bin0.jpg" alt="" /></div>
<div id="dsec1"><img src="bin0.jpg" alt="" /></div>
<div id="dsec0"><img src="bin0.jpg" alt="" /></div>
<div id="usec3"><img src="bin0.jpg" alt="" /></div>
<div id="usec2"><img src="bin0.jpg" alt="" /></div>
<div id="usec1"><img src="bin0.jpg" alt="" /></div>
<div id="usec0"><img src="bin0.jpg" alt="" /></div>
 </BODY>
</HTML>

// Ci-après le fichier 'Horloge Binaire.js'

<!--
/* Horloge Binaire par Jean ELCHINGER optimisé par TheGuit
puis optimisé une nouvelle fois par Force4 [11/06/04] --
                    mise à jour par Force4 [04/02/08] =D

Date : 7/11/2003
Email : web.jean@ifrance.com

Script modifié à partir de l'horloge binaire :
http://www.california.com/~binard

Pour acheter une vraie horloge binaire :
LED Binary Clock
http://www.thinkgeek.com/cubegoodies/lights/59e0/

  • /
var bin0 = '<img src="bin0.jpg" alt="" />', bin1 = '<img src="bin1.jpg" alt="" />'; function showtime() { var now = new Date(); var ledup = function(family, time, mask, field) { while (field >= 0) { if (time >= (mask << field)) { eval("document.getElementById('" + family + field + "').innerHTML = bin1"); time -= (mask << field); } else eval("document.getElementById('" + family + field + "').innerHTML = bin0"); field--; } } ledup('dsec', now.getSeconds(), 10, 2); ledup('usec', now.getSeconds() % 10, 1, 3); ledup('dmin', now.getMinutes(), 10, 2); ledup('umin', now.getMinutes() % 10, 1, 3); ledup('dheure', now.getHours(), 10, 1); ledup('uheure', now.getHours() % 10, 1, 3); setTimeout("showtime();", 1000); } //-->

Conclusion :


Le code source précédent ne vous sert pas à grand chose sans les images contenues dans le zip...

Codes Sources

A voir également

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.