Discussion :

[cedrus]

Bonjour,

Il y a ce code pré-installé pour gérer un compteur de temps pour une vente flash d'un produit. Le compteur est bien affiché mais il ne s'actualise que si on actualise la page. Je voudrais que le compteur s'actualise tout seul à chaque seconde. il y a le <script> qui est déactivé avec la syntaxe /* mais même si j'enleve le /* pour l'activé le paramètre

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

setInterval('cur_time('+end+');',1000);

ne semble pas fonctionner. Alors comment corriger ce code ? Merci d'avance

Code php :

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
<?php
$date1 = $project['end_date'];
//echo $project['end_date'];
$date2 = date('Y-m-d h:i:s');
$diff = abs(strtotime($date1) - strtotime($date2));
$years = floor($diff / (365*60*60*24));
$months = floor(($diff - $years * 365*60*60*24) / (30*60*60*24));
$days = floor(($diff - $years * 365*60*60*24 - $months*30*60*60*24)/ (60*60*24));
//echo "<br>".$years."<br>";
//echo $months."<br>";
//echo $days."<br>";
$day1 = floor($diff/ (60*60*24));
$hours = floor(($diff - $day1*60*60*24)/ (60*60));
$minuts = floor(($diff - $day1*60*60*24 - $hours*60*60)/ 60);
$seconds = floor(($diff - $day1*60*60*24 - $hours*60*60 - $minuts*60));
date('d', strtotime($project['end_date']));
if($day1 < 10) $day1 = '0'.$day1;
if($hours < 10) $hours = '0'.$hours;
if($minuts < 10) $minuts = '0'.$minuts;
if($seconds < 10) $seconds = '0'.$seconds;
/*echo "<br>days=".$day1."<br>";
echo "<br>days=".$hours."<br>";
echo "<br>days=".$minuts."<br>";
echo "<br>days=".$seconds."<br>";
die();*/
?>
<script>
    /*function update_cur_time(t1,t2)
    {
        var end = new Date(t1);
        var cur = new Date(t2);
        var loc = new Date();
        end = end.getTime();
        cur = cur.getTime();
        loc = loc.getTime();
        var temp = cur - loc;
        end = end - temp;
        setInterval('cur_time('+end+');',1000);
    }
    function cur_time(end)
    {
        var loc = new Date();
        loc = loc.getTime();
        var diff = end - loc;
        var dd = Math.floor(diff / (1000*60*60*24));
        var hh = Math.floor((diff - (1000*60*60*24*dd)) / (1000*60*60));
        var mm = Math.floor((diff - (1000*60*60*24*dd) - (1000*60*60*hh)) / (1000*60));
        var ss = Math.floor((diff - (1000*60*60*24*dd) - (1000*60*60*hh) - (1000*60*mm)) / (1000));
        if(dd < 10){ dd = '0' + dd; }
        if(hh < 10){ hh = '0' + hh; }
        if(mm < 10){ mm = '0' + mm; }
        if(ss < 10){ ss = '0' + ss; }
        if(dd==00 && hh==00 && mm==00 && ss==00){
            clearInterval();
        }
        document.getElementById('update_day').innerHTML = dd;
        document.getElementById('update_hour').innerHTML = hh;
        document.getElementById('update_minute').innerHTML = mm;
        document.getElementById('update_second').innerHTML = ss;
    }*/
</script>

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

setInterval(function(){cur_time(end);},1000);

a moins que ce ne soit d'an un echo de php ??? mais end semble être une variable js ..

[cedrus]

Je ne sais pas justement !

[SpaceFrog]

ben pour le moment si ton code est en l'etat tout les code js est commenté, donc ça ne risque pas de fonctionner

[cedrus]

oui j ai recopié tel quel le code qui est intégré dans le bloc qui gère le décompte. J'ai précisé dans le premier post que même si je le décommente en enlevant les /* ça ne change rien. Du coup que dois je faire ? Merci

[Bovino]

Peut-être appeler la fonction qui initialise le tout ?

[cedrus]

Bovino, cette fonction n est elle pas inclut dans ce code ? Sinon comment l'intégrer ?

[Bovino]

Je n'ai pas parlé de l'intégrer, j'ai parlé de l'appeler.
Il me semble que d'autres langages de programmation utilisent le même principe :
tu définis une fonction, mais pour l'exécuter, il faut l'appeler, sinon elle ne sert à rien.

[SpaceFrog]

et surtout décommenter le code ...

[cedrus]

J'ai décommenté le script mais je sais pas comment l appeler... Help...

[NoSmoking]

Bonjour,
appelles le Noël c'est tendance en ce moment.
bonnes fêtes!

[cedrus]

Merci NoSmoking pour cette remarque très utile ! Même si j'ai beaucoup l'humour j aimerai pouvoir avancer et résoudre ce casse tête. Je ne suis pas programmeur comme vous tous, aussi soyez indulgent

[NoSmoking]

Il faut que tu fasses ce qui t'a été recommandé, il faut qu'à un moment la fonction s'exécute donc il faut l’appeler

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
// déclaration de la fonction
function afficheTexte( txt ){
  alert( txt);
}
// déclaration d'une variable initialisée
var mess = 'Texte affiché dans la boite';
// appel de la fonction avec passage de la variable en paramètre
afficheTexte( mess); // affichera "Texte affiché dans la boite"

[cedrus]

Justement voici ce que j ai fait (bidouille en cours) en ajoutant les 3 dernières lignes du code mais ça marche toujours pas:

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
function update_cur_time(t1,t2)
{
	var end = new Date(t1);
	var cur = new Date(t2);
	var loc = new Date();
	end = end.getTime();
	cur = cur.getTime();
	loc = loc.getTime();
	var temp = cur - loc;
	end = end - temp;
	setInterval('cur_time('+end+');',1000);
}
function cur_time(end)
{
	var loc = new Date();
	loc = loc.getTime();
	var diff = end - loc;
	var dd = Math.floor(diff / (1000*60*60*24));
	var hh = Math.floor((diff - (1000*60*60*24*dd)) / (1000*60*60));
	var mm = Math.floor((diff - (1000*60*60*24*dd) - (1000*60*60*hh)) / (1000*60));
	var ss = Math.floor((diff - (1000*60*60*24*dd) - (1000*60*60*hh) - (1000*60*mm)) / (1000));
	if(dd < 10){ dd = '0' + dd; }
	if(hh < 10){ hh = '0' + hh; }
	if(mm < 10){ mm = '0' + mm; }
	if(ss < 10){ ss = '0' + ss; }
	if(dd==00 && hh==00 && mm==00 && ss==00){
		clearInterval();
	}
	document.getElementById('update_day').innerHTML = dd;
	document.getElementById('update_hour').innerHTML = hh;
	document.getElementById('update_minute').innerHTML = mm;
	document.getElementById('update_second').innerHTML = ss;
}
setTimeout(update_cur_time,1000);
setInterval(update_cur_time,1000);
update_cur_time(t1,t2);

[NoSmoking]

Je ne sais trop par où commencer

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
setTimeout(update_cur_time,1000);
setInterval(update_cur_time,1000);

il faudrait savoir ce que tu veux setTimeout ou setInterval, il faut faire un choix.
- setTimeout s'exécute une fois fois après le delai https://developer.mozilla.org/en-US/...dow.setTimeout
- setInterval s'exécute tous les délais https://developer.mozilla.org/en-US/...ow.setInterval

dans ta fonction

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function update_cur_time(t1,t2){
  // du code
  setInterval('cur_time('+end+');',1000);
}

setInterval va relancer la fonction à chaque appel MAIS indéfiniment toutes les 1s, donc au 1er appel tu aura 1 appel au 2éme tu en auras 2 + celui en cours, au 3éme et ainsi de suite, il va vite y avoir saturation.

Oui mais je fais un clearInterval dans la fonction cur_time me diras tu, seulement comme tu ne passes pas de paramètre tu ne supprimes rien et de plus elle n'est pas concernée par la fonction update_cur_time, en gros c'est le chantier...

Pour le passage des paramètres à une fonction mise dans la méthode setTimeout reprend ce qu'a mis SpaceFrog.

A suivre...

[cedrus]

J'espère avoir tout saisi. Donc j ai viré setInterval pour le remplacer par setTimeout mais avec le code donné par Spacefrog. Voilà ce que j ai mis mais ça ne fonctionne toujours pas. J'ai pourtant déclaré les deux fonctions avant la clôture du script et utilisé deux fois le setTimeout (mais ça je suis pas sûr d'avoir bien fait). Qu'en penses tu ?

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
function update_cur_time(t1, t2) {
  var end = new Date(t1);
  var cur = new Date(t2);
  var loc = new Date();
  end = end.getTime();
  cur = cur.getTime();
  loc = loc.getTime();
  var temp = cur - loc;
  end = end - temp;
  setTimeout(function () {
    cur_time(end);
  }, 1000);
}
 
function cur_time(end) {
  var loc = new Date();
  loc = loc.getTime();
 
  var diff = end - loc;
  var dd = Math.floor(diff / (1000 * 60 * 60 * 24));
  var hh = Math.floor((diff - (1000 * 60 * 60 * 24 * dd)) / (1000 * 60 * 60));
  var mm = Math.floor((diff - (1000 * 60 * 60 * 24 * dd) - (1000 * 60 * 60 * hh)) / (1000 * 60));
  var ss = Math.floor((diff - (1000 * 60 * 60 * 24 * dd) - (1000 * 60 * 60 * hh) - (1000 * 60 * mm)) / (1000));
  if (dd < 10) {
    dd = '0' + dd;
  }
  if (hh < 10) {
    hh = '0' + hh;
  }
  if (mm < 10) {
    mm = '0' + mm;
  }
  if (ss < 10) {
    ss = '0' + ss;
  }
  if (dd == 00 && hh == 00 && mm == 00 && ss == 00) {
    clearInterval();
  }
  document.getElementById('update_day').innerHTML = dd;
  document.getElementById('update_hour').innerHTML = hh;
  document.getElementById('update_minute').innerHTML = mm;
  document.getElementById('update_second').innerHTML = ss;
}
 
setTimeout(function () {
  cur_time(end);
}, 1000);
cur_time(end);
update_cur_time(t1, t2);

[NoSmoking]

Isolons ce code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
setTimeout(function () {
  cur_time(end);
}, 1000);
cur_time(end);
update_cur_time(t1, t2);

Première question à te poser, que valent les variables que tu passes en paramètre à ces fonctions, sont-elles définies ?

C'est la fonction cur_time que tu souhaites voir s’exécuter toutes les 1s.

Comme la fonction cur_time est elle appelée par update_cur_time, inutile de répéter les appels avant.

Ensuite suis le déroulement des opérations, update_cur_time lance la fonction cur_time après 1s oui mais après il n'y a plus de nouvel appel !?!

nota:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
  if (dd == 00 && hh == 00 && mm == 00 && ss == 00) {
    clearInterval();
  }

voir remarque déjà faite.

[cedrus]

Perso, j'y comprend rien à ce script et en effet je pense qu'il n est pas adapté. C est sans doute pour ça qu'il était commenté à l'origine. Le webmaster avait du se rendre compte qu'il n'y arrivait pas. Aussi dans l'idéal j'aimerai qu'on m'aide à rédiger un nouveau code propre. Car je viens déjà de perdre 2 jours et rien ne marche. J'ai bien trouvé des scripts déjà fait mais qui prend en compte une seule date de fin. Et moi la date de fin du compteur doit être prise depuis la bdd pour chaque produit $project['end_date']

J'ai pas pensé à vous montrer la suite du code qui affiche le compteur:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<div style="float:right;">
                        	<h4>
 
                                <?php if($project['unlimited_days'] != 1)
                                                                        { ?>
                                    <img src="<?php echo base_url();?>images/clock.png" alt="" />
                                <?php echo $day1 ; ?>:<?php echo $hours ; ?>:<?php echo $minuts ; ?>:<?php echo $seconds ; ?><br>
                                <span style="margin-left:12px;">&nbsp;</span><span style="font-size: 13px;margin: 0px 6px;"><?php echo DAYS;?></span><span style="font-size: 13px;margin: 0px 6px;"><?php echo HRS;?></span><span style="font-size: 13px;margin: 0px 6px;"><?php echo MIN;?></span><span style="font-size: 13px;margin: 0px 6px;"><?php echo SEC;?></span>
                                <?php } ?>

[NoSmoking]

J'ai bien trouvé des scripts déjà fait mais

peut être te faut-il essayer de comprendre, ce qui me paraît préférable.

Tout d'abord, dans ton cas il est préférable d'utiliser la méthode setInterval qui ne sera pas sensible à un événement extérieur tel qu’un appui prolongé sur un bouton du navigateur par exemple.

- la function update_cur_time est en fait une fonction d'initialisation qui requière 2 paramètres au format bien précis puisque l'on initialise des objets Date avec. Il faut donc l'appeler en début de script.

- la function cur_time est en fait la fonction de calcul et de mise à jour de l'affichage du temps restant, c'est celle ci qu'il faut appeler à intervalle régulier, disons toutes les 1s, donc il faut l'appeler depuis la fonction d'initialisation et ce une seule fois, because le setInterval.

- lorsque tu arrives à échéance il te faut pouvoir supprimer le timer référence du setInterval, donc il te faut une variable pour cela.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
var iTimer;
// Init des variables par exemple, le format est adapté aux oldBrowsers
var dateFin = 'December 25, 2013 00:00:00'; // Date échéance
var dateDeb = new Date();                   // date du jour
// appel de la fonction d'initialisation
initCompteur( dateFin, dateDeb);            // la fonction a été renomée

passons à la fonction initCompteur (ex:update_cur_time)

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
function initCompteur( t1, t2) {
  var end = new Date(t1);
  var cur = new Date(t2);
  var loc = new Date();
  end = end.getTime();
  cur = cur.getTime();
  loc = loc.getTime();
  var temp = cur - loc;
  end = end - temp;
  // affichage immédiat
  afficheCompteur( end);    // ex function cur_time
  // rappel de la fonction toutes les 1s
  iTimer = setInterval(function () {
    afficheCompteur( end);    // ex function cur_time
  }, 1000);
 
}

passons à la fonction afficheCompteur (ex:cur_time), les noms me paraissent plus appropriés.

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
function afficheCompteur(end) {
  var loc = new Date();
  loc = loc.getTime();
 
  var diff = end - loc;
  var dd = Math.floor(diff / (1000 * 60 * 60 * 24));
  var hh = Math.floor((diff - (1000 * 60 * 60 * 24 * dd)) / (1000 * 60 * 60));
  var mm = Math.floor((diff - (1000 * 60 * 60 * 24 * dd) - (1000 * 60 * 60 * hh)) / (1000 * 60));
  var ss = Math.floor((diff - (1000 * 60 * 60 * 24 * dd) - (1000 * 60 * 60 * hh) - (1000 * 60 * mm)) / (1000));
  if (dd < 10) {
    dd = '0' + dd;
  }
  if (hh < 10) {
    hh = '0' + hh;
  }
  if (mm < 10) {
    mm = '0' + mm;
  }
  if (ss < 10) {
    ss = '0' + ss;
  }
  // on peut faire un SI diff <= 0 ALORS
  if (dd == 00 && hh == 00 && mm == 00 && ss == 00) {
    clearInterval( iTimer);
  }
  document.getElementById('d').innerHTML = dd;
  document.getElementById('h').innerHTML = hh;
  document.getElementById('m').innerHTML = mm;
  document.getElementById('s').innerHTML = ss;
}

je n’ai pas retouché le code qui est perfectible mais ce n'est pas l'objet de la question.

Dernière chose qui a également son importance, les éléments du DOM recevant le changement, d-h-m-et s, doivent exister avant de leur affecter un innerHTML.

[cedrus]

J'essaye justement de comprendre mais je n'ai jamais rédigé de script (je commence à peine à comprendre et intervenir sur du php..) J ai compris à quoi sert chaque fonction et tu me l'as bien expliqué clairement. Cependant je reste incapable n ayant pas le niveau d'apporter des réelles modifications au script.

Tu as ajouté un "var iTimer" mais où dois je ajouté ce bout de code ? Dans une des fonctions ou après les deux fonctions ? De plus la date d'échéance est dans ton exemple une date précise qu on entre. Hors pour moi il faut qu il aille chercher dans la bdd la date d'échéance $project['end_date'] de chaque produit de manière automatique. Et je sais pas comment le rédiger pour le script.

Autre point tu modifies les innerHTML de la dernière fonction en les remplaçant par d-h-m-et s, mais je sais pas du tout quoi faire avec ça ou comment les faire exister comme tu me le suggères.


Du coup pour l'instant voilà ce que j'ai écris. Ca ne marche pas toujours pas mais je comprend bien qu'il y a des choses à modifier.

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
function initCompteur(t1, t2) {
    var end = new Date(t1);
    var cur = new Date(t2);
    var loc = new Date();
    end = end.getTime();
    cur = cur.getTime();
    loc = loc.getTime();
    var temp = cur - loc;
    end = end - temp;
    // affichage immédiat
    afficheCompteur(end); // ex function cur_time
    // rappel de la fonction toutes les 1s
    iTimer = setInterval(function () {
        afficheCompteur(end); // ex function cur_time
    }, 1000);
}
 
function afficheCompteur(end) {
    var loc = new Date();
    loc = loc.getTime();
 
    var diff = end - loc;
    var dd = Math.floor(diff / (1000 * 60 * 60 * 24));
    var hh = Math.floor((diff - (1000 * 60 * 60 * 24 * dd)) / (1000 * 60 * 60));
    var mm = Math.floor((diff - (1000 * 60 * 60 * 24 * dd) - (1000 * 60 * 60 * hh)) / (1000 * 60));
    var ss = Math.floor((diff - (1000 * 60 * 60 * 24 * dd) - (1000 * 60 * 60 * hh) - (1000 * 60 * mm)) / (1000));
    if (dd < 10) {
        dd = '0' + dd;
    }
    if (hh < 10) {
        hh = '0' + hh;
    }
    if (mm < 10) {
        mm = '0' + mm;
    }
    if (ss < 10) {
        ss = '0' + ss;
    }
    // on peut faire un SI diff <= 0 ALORS
    if (dd == 00 && hh == 00 && mm == 00 && ss == 00) {
        clearInterval(iTimer);
    }
    document.getElementById('update_day').innerHTML = dd;
    document.getElementById('update_hour').innerHTML = hh;
    document.getElementById('update_minute').innerHTML = mm;
    document.getElementById('update_second').innerHTML = ss;
}
var iTimer;
// Init des variables par exemple, le format est adapté aux oldBrowsers
var dateFin = 'December 25, 2013 00:00:00'; // Date échéance
var dateDeb = new Date(); // date du jour
// appel de la fonction d'initialisation
initCompteur(dateFin, dateDeb); // la fonction a été renomée
initCompteur(t1, t2);
afficheCompteur(end);