Bonjour tout le monde !

M'améliorant de jour en jour en jQuery (qui est, je trouve, un langage formidable) j'ai décidé de faire un plugin. Pour le moment pas sous la forme d'un plugin mais seulement sous la forme d'un fichier .js.

Celui ci se trouve être une horloge binaire.

J'aimerais beaucoup avoir vos avis sur ce que j'ai déjà produit, et vos idées d'amélioration du code, voire d'ajout de possibilités.

Pour utiliser le plugin :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
<div class="binaryClock value #bababa red rgb(172,17,97)"></div>
 
arg[0] = 'binaryClock' : Obligatoire c'est le nom de la div qui contiendra l'horloge binaire
arg[1] = 'value' ou 'noValue' : Affiche les valeurs des leds ou non
arg[2] = Couleur leds heures
arg[3] = Couleur leds minutes
arg[4] = Couleur leds secondes
Les couleurs peuvent être renseignées en hexadécimal (avec le # au début), en rgb sous forme : rgb(rouge, vert, bleu), ou au format texte en anglais (green / red / blue / purple ...)

binary.html
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
        <script type="text/javascript" src="binaryClock.js"></script>
        <style>
            div
            {
                position:absolute;
            }
        </style>
    </head>
    <body>
        <div class="binaryClock value #bababa red rgb(172,17,97)"></div>
    </body>
</html>
binaryClock.js
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
$(document).ready(function(){
    var tabClock = [[  0, 38,   0, 28,   0, 18],
                    [  0, 34,   0, 24,   0, 14],
                    [  0, 32, 232, 22, 132, 12],
                    [316, 31, 216, 21, 116, 11]];
    var tabVal   = [[ 0, 8,  0, 8,  0, 8],
                    [ 0, 4,  0, 4,  0, 4],
                    [ 0, 2, 32, 2, 32, 2],
                    [16, 1, 16, 1, 16, 1]];           
    var classArray = $('.binaryClock').attr('class').split(' ');
 
    var i, j;
    var ledColorHeu = 'red';
    var ledColorMin = 'green';
    var ledColorSec = 'blue';
 
    if(classArray[2] != null)
        ledColorHeu = classArray[2];
    if(classArray[3] != null)
        ledColorMin = classArray[3];
    if(classArray[4] != null)
        ledColorSec = classArray[4];
 
    for(i = 0; i < 4; i++)
    {
        for(j = 0; j < 6; j++)
        {
            if(tabClock[i][j] != 0)
            {
                var hauteur = 32 * i;
                var longueur = 32 * j;
                if(classArray[1] == 'noValue')
                    $('.binaryClock').append('<div class="' + tabClock[i][j] + '" style="top:' + hauteur + 'px;left:' + longueur + 'px;"></div>');
                else if(classArray[1] == 'value')
                    $('.binaryClock').append('<div class="' + tabClock[i][j] + '" style="top:' + hauteur + 'px;left:' + longueur + 'px;">' + tabVal[i][j] + '</div>');
            }
        }
    }
    $('.binaryClock div').width('30px').height('30px').css('border', '1px solid black').css('border-radius', '30px').css('text-align', 'center');
 
    function Clock() {
        $('div').css('background', 'white').css('color', 'black');
        var laDate = new Date();
        Calcul(3, laDate.getHours(), ledColorHeu);
        Calcul(2, laDate.getMinutes(), ledColorMin);
        Calcul(1, laDate.getSeconds(), ledColorSec);
    }
 
    function Calcul(type, valeur, ledColor){
        if(valeur >= 32)
        {
            $('div.' + type + '32').css('background', ledColor).css('color', 'white');
            valeur -= 32;
        }
        if(valeur >= 16)
        {
            $('div.' + type + '16').css('background', ledColor).css('color', 'white');
            valeur -= 16;
        }
        if(valeur >= 8)
        {
            $('div.' + type + '8').css('background', ledColor).css('color', 'white');
            valeur -= 8;
        }
        if(valeur >= 4)
        {
            $('div.' + type + '4').css('background', ledColor).css('color', 'white');
            valeur -= 4;
        }
        if(valeur >= 2)
        {
            $('div.' + type + '2').css('background', ledColor).css('color', 'white');
            valeur -= 2;
        }
        if(valeur >= 1)
        {
            $('div.' + type + '1').css('background', ledColor).css('color', 'white');
            valeur -= 1;
        }
    }
    setInterval(Clock, 1000);
});
Voila. Merci à ceux qui liront.

PS : Y a-t-il moyen d'adapter la position à l'élement parent ? (La div en l'occurence) Merci !