Discussion :

[Ciloe]

Alors, je vais essayer d'être clair ^^.

Je veux créer un décompteur "comming soon" grâce à la librairie JQuery. J'ai donc d'abord créé un système pour faire des éléments rond:

Mon html ressemble à celui ci :

Code html :

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
<div class="item grid_3 alpha">
  <div class="round">
    <input type="text" id="jours" data-max="100" data-min="0" class="round" name="round">
  </div>
</div>
<div class="item grid_3 alpha">
  <div class="round">
    <input type="text" id="heures" data-max="24" data-min="0" class="round" name="round">
  </div>
</div>
<div class="item grid_3 alpha">
  <div class="round">
    <input type="text" id="minutes" data-max="60" data-min="0" class="round" name="round">
  </div>
</div>
<div class="item grid_3 alpha">
  <div class="round">
    <input type="text" id="secondes" data-max="60" data-min="0" class="round" name="round">
  </div>
</div>

En suite, je vais créer des canvas pour les habiller. Tous ça en JQuery

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
$('input.round').wrap('<div class="round" />').each(function(){
        var $input = $(this);
        var $div = $input.parent();
        var min = $input.data('min');
        var max = $input.data('max');
 
        $cercle = $('<canvas width="220px" height="220px" />');
        $color = $('<canvas width="220px" height="220px" />');
        $div. append($cercle);
        $div. append($color);
 
        var ctx = $cercle[0].getContext('2d');
        ctx.beginPath();
        ctx.arc(110,110,95,0,2*Math.PI);
        ctx.lineWidth = 20;
        ctx.strokeStyle = "#fff";
        ctx.shadowOffsetX = 2;
        ctx.shadowBlur = 5;
        ctx.shadowColor = "rgba(0,0,0,0.2)";
        ctx.stroke();
 
        var ratio = ($input.val() - min) / (max - min)
 
        var ctx = $color[0].getContext('2d');
        ctx.beginPath();
        ctx.arc(110,110,95,-1/2 * Math.PI, ratio*2*Math.PI - 1/2 * Math.PI);
        ctx.lineWidth = 20;
        ctx.strokeStyle = "#2DA2C5";
        ctx.stroke();
    });

En suite je vais remplir mes inputs des valeurs suivant une date:

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
function Init(){
        var jours = $('input#jours');
        var heures = $('input#heures');
        var minutes = $('input#minutes');
        var secondes = $('input#secondes');
        var now = new Date();
        var finale = new Date ("April 9 15:15:15 2013");
        var sec = (finale - now) / 1000;
        var n = 24 * 3600;
        if (sec > 0) {
            j = Math.floor (sec / n);
            h = Math.floor ((sec - (j * n)) / 3600);
            mn = Math.floor ((sec - ((j * n + h * 3600))) / 60);
            sec = Math.floor (sec - ((j * n + h * 3600 + mn * 60)));
            jours.val(j);
            heures.val(h);
            minutes.val(mn);
            secondes.val(sec);
        }
    }
 
    Init();

Bref, jusque maintenant ça marche.

Sauf que je n'arrive pas à automatiser le truc. Je veux que lorsque le compteur découle, les input changent de valeur (ça je sais faire) mais les canvas n'évoluent pas... Et il est là le problème....

Par exemple, dans mon each, à la fin, j'aimerais faire une fonction $input.change(function(){}) Et faire à l'intérieur... Sauf que ça marche pas car c'est pas un changement via le html mais via le JS... Alors que si je fais un $div.click(function(event){}) et que je fais un traitement dedans, il le prend en compte... Mais c'est pas se que je veux.

Quelqu'un peut m'aider?

[Ciloe]

J'ai réussit.

J'ai séparé l'initialisation, puis j'ai intégré la fonction du canvas dans mon compteur. Voilà le code 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
$(function(){
 
    $('input.round').wrap('<div class="round" />').each(function(){
        var $input = $(this);
        var $div = $input.parent();
        $cercle = $('<canvas class="cercle" width="220px" height="220px" />');
        $color = $('<canvas class="color" width="220px" height="220px" />');
        $div. append($cercle);
        $div. append($color);
    });
 
    function Init_temps(){
        var jours = $('input#jours');
        var heures = $('input#heures');
        var minutes = $('input#minutes');
        var secondes = $('input#secondes');
        var now = new Date();
        var finale = new Date ("April 9 15:15:15 2013");
        var sec = (finale - now) / 1000;
        var n = 24 * 3600;
        if (sec > 0) {
            j = Math.floor (sec / n);
            h = Math.floor ((sec - (j * n)) / 3600);
            mn = Math.floor ((sec - ((j * n + h * 3600))) / 60);
            sec = Math.floor (sec - ((j * n + h * 3600 + mn * 60)));
            jours.val(j);
            heures.val(h);
            minutes.val(mn);
            secondes.val(sec);
        }
 
    }
 
    function Affichage(){
 
        $('input.round').each(function(){
            var $input = $(this);
            var $div = $input.parent();
            var min = $input.data('min');
            var max = $input.data('max');
            $cercle = $div.children('.cercle');
            $color = $div.children('.color');
            console.log('Init : '+$input.attr('id')+' '+$color.toSource());
 
            var ctx = $cercle[0].getContext('2d');
            ctx.clearRect(0,0,220,220);
            ctx.beginPath();
            ctx.arc(110,110,95,0,2*Math.PI);
            ctx.lineWidth = 20;
            ctx.strokeStyle = "#fff";
            ctx.shadowOffsetX = 2;
            ctx.shadowBlur = 5;
            ctx.shadowColor = "rgba(0,0,0,0.2)";
            ctx.stroke();
 
            var ratio = ($input.val() - min) / (max - min);
 
            var ctx = $color[0].getContext('2d');
            ctx.clearRect(0,0,220,220);
            ctx.beginPath();
            ctx.arc(110,110,95,-1/2 * Math.PI, ratio*2*Math.PI - 1/2 * Math.PI);
            ctx.lineWidth = 20;
            ctx.strokeStyle = "#2DA2C5";
            ctx.stroke();
        });
 
    }
 
    Init_temps();
    Affichage();
    Rebour();
 
    function Rebour() {
        Init_temps();
        Affichage();
        window.setTimeout (Rebour, 1000);
    }
});