Compteur de temps pour vente flash

Version imprimable

Voir 40 message(s) de cette discussion en une page

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:

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

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

Code:

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>

18/12/2013, 16h14
SpaceFrog

Code:

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 ..
18/12/2013, 17h14
cedrus

Je ne sais pas justement !
18/12/2013, 17h16
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
18/12/2013, 17h40
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
18/12/2013, 19h16
Bovino

Peut-être appeler la fonction qui initialise le tout ? :mrgreen:
18/12/2013, 23h40
cedrus

Bovino, cette fonction n est elle pas inclut dans ce code ? Sinon comment l'intégrer ?
19/12/2013, 07h53
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. :aie:
19/12/2013, 08h47
SpaceFrog

et surtout décommenter le code ...
21/12/2013, 13h42
cedrus

J'ai décommenté le script mais je sais pas comment l appeler... Help...:cry:
21/12/2013, 15h27
NoSmoking

Bonjour,
appelles le Noël c'est tendance en ce moment.
:pastaper: bonnes fêtes!
21/12/2013, 15h51
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

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:

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"

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:

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);

21/12/2013, 17h42
NoSmoking
Je ne sais trop par où commencer
Code:

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 :fleche: https://developer.mozilla.org/en-US/...dow.setTimeout
- setInterval s'exécute tous les délais :fleche: https://developer.mozilla.org/en-US/...ow.setInterval

dans ta fonction
Code:

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...

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:

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);

22/12/2013, 08h26
NoSmoking
Isolons ce code
Code:

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:

1 2 3 if (dd == 00 && hh == 00 && mm == 00 && ss == 00) { clearInterval(); }
voir remarque déjà faite.

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:

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 } ?>

Citation:

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:

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:

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:

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.

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:

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);

Voir 40 message(s) de cette discussion en une page