Compteur de temps pour vente flash

**NoSmoking** · 22/12/2013, 16h37

Tout d'abord
Merci de soigner l'indentation, pensez à ceux qui lisent!

...n ayant pas le niveau d'apporter des réelles modifications au script.

le code est opérationnel même si pas top.

Tu as ajouté un "var iTimer" mais où dois je ajouté ce bout de code ?

cette variable doit être globale là où tu l'a mis c'est correct.

il faut qu il aille chercher dans la bdd la date d'échéance $project['end_date'] de chaque produit de manière automatique.

c'es juste un morceau de PHP du type

Code php :

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

1
2
3
var dateFin = "<?php echo $dateFin ?>";
var dateDeb = "<?php echo $dateDeb ?>";
update_cur_time( dateFin, dateDeb);

Ca ne marche pas toujours pas mais je comprend bien qu'il y a des choses à modifier.

dans le code suivant il suffit de lancer la fonction initCompteur qui enchainera

Code :

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

1
2
3
initCompteur(dateFin, dateDeb); // Appel de la fonction point final
// initCompteur(t1, t2); INUTILE
// afficheCompteur(end);  INUTILE

**cedrus** · 22/12/2013, 16h48

Code :

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

1
2
var dateFin = "<?php echo $end_date ?>"; // Date échéance
          var dateDeb = new Date();                   // date du jour

Je met ce code à la fin ou je l'intègre à function initCompteur(t1,t2) ? car si je l intègre je dois alors tout virer ce bout de code ou les remplacer par les nouvelles valeurs ?:

Code :

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

1
2
3
4
5
6
var loc = new Date();
          end = end.getTime();
          cur = cur.getTime();
          loc = loc.getTime();
          var temp = cur - loc;
          end = end - temp;

Voilà où j'en suis. Ca ne marche pas mais j'ai du me tromper:

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
 
var iTimer;
function initCompteur(dateFin,dateDeb) {
    var dateFin = "<?php echo $end_date ?>"; // Date échéance
    var dateDeb = new Date();                // date du jour
    var loc = new Date();
    dateFin = dateFin.getTime();
    dateDeb = dateDeb.getTime();
    loc = loc.getTime();
    var temp = dateDeb - loc;
    dateFin = dateFin - 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 console me dit "dateFin is not define"

**NoSmoking** · 22/12/2013, 23h18

Il faut que tu arrêtes de tout changer à l'emporte pièce et que tu essaies de comprendre ce que tu écris.

Pourquoi vouloir changer le contenu des fonctions qui fonctionnent, tu as tout pour reconstituer le script, je le fais pour toi.

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
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('d').innerHTML = dd;
  document.getElementById('h').innerHTML = hh;
  document.getElementById('m').innerHTML = mm;
  document.getElementById('s').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é renommée

il te reste à intégrer tes variables PHP comme je te l'ai indiqué.

**cedrus** · 23/12/2013, 00h02

Merci. Alors j'ai tout remis ce que tu as écris et modifié simplement cette variable comme ceci:

Code :

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

var dateFin = "<?php echo $project['end_date'] ?>";

pour qu il prenne en compte dans la bdd la date de clôture de chaque produit. Pour l instant ça ne fonctionne toujours pas. Il faut toujours actualiser la page pour que le compte à rebours s'actualise.

Tu m avais dit aussi de déclarer les variables d,h,m et s mais je t avoue que je ne sais pas comment faire. En tout cas merci pour le temps que tu m'accordes.

**NoSmoking** · 23/12/2013, 20h32

Il faudrait connaitre le format de sortie de var dateFin = "<?php echo $project['end_date'] ?>"; pour vérifier si il est conforme à l'attendu.

Tu m avais dit aussi de déclarer les variables d,h,m et s ...

Non, je parlais des éléments du DOM

..., les éléments du DOM recevant le changement, d-h-m-et s, doivent exister avant de leur affecter un innerHTML.

il est vrai que par pure fainéantise j'ai raccourci les ID des éléments qui sont donc en fait update_day, update_hour, update_minute et update_second

**cedrus** · 23/12/2013, 22h20

J'ai repris simplement le $project['end_date'] qui était au tout début du code. Mais est ce que pour la syntaxe du script c est la même chose ?
Dans la base de donnée la date de fin 'end_date' est indiquée exactement comme cela: 2013-12-31 11:45:12

Du coup sur le site le compte à rebours est affiché comme cela

Pour les éléments de Dom, je t avoue que je sais même pas ce que c'est..donc je sais pas comment vérifier leur existence...

**NoSmoking** · 23/12/2013, 23h08

Il faut simplement que la variable soit initialisée avant sont utilisation.

Pour les éléments de Dom, je t avoue que je sais même pas ce que c'est..d

DOM = Document Object Model, plein d'info sur À propos du Document Object Model

En gros quand tu écris document.getElementById('update_date').innerHTML = dd, tu récupères l'élément du document ayant comme ID 'update_date' et tu remplaces son contenu, innerHTML, par ce que contient la variable dd, donc si l'élément n'existe pas ou ne fait pas encore partie du document, document en cours d'écriture ou script exécuté avant la déclaration de cet élément, le script plante.

2013-12-31 11:45:12

n'est pas au bon format pour Date()

**cedrus** · 24/12/2013, 00h15

1. Pour initialiser la variable il faut ajouter au script :

Code :

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

$end_date = 'end_date';

ou

Code :

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

$data['end_date']=$project['end_date'];

?

2. Il y a 3 Date() dans le script. A ce que je vois dans la partie php il faut les remplacer par Date('Y-m-d h:i:s') ?

3.Pour les DOM je regarde des liens sur le web mais je nage toujours...

**NoSmoking** · 24/12/2013, 19h16

il faut que tu remplaces l'espace par un T

Code php :

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

$end_date = str_replace(' ', 'T', $end_date);

http://www.ecma-international.org/ec...#sec-15.9.1.15

**cedrus** · 26/12/2013, 14h39

Là je suis un peu largué...

**NoSmoking** · 26/12/2013, 15h54

Là je suis un peu largué...

cela ne va pas nous aider à résoudre ton questionnement!

Montre nous le code auquel tu es arrivé, je redoute le pire

**cedrus** · 26/12/2013, 17h17

Voilà où j en suis avec le code complet, grâce aux différentes aides et explications.

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
83
84
85
86
87
<?php 
$date1 = $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));
$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;
?>
<script>
function initCompteur( t1, t2) {
  var end = new Date(t1);
  var cur = new Date(t2);
  var loc = new Date('Y-m-d h:i:s');
  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('Y-m-d h:i:s');
  loc = loc.getTime();
 
 var update_day= "days";   
 var update_hour;
 var update_minute;
 var update_second;
 
  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;
// $end_date = 'end_date';
$end_date = str_replace(' ', 'T', $end_date);
// $data['end_date']=$project['end_date'];
// Init des variables par exemple, le format est adapté aux oldBrowsers
var dateFin = "<?php echo $project['end_date'] ?>"; // Date échéance
var dateDeb = new Date('Y-m-d h:i:s');                   // date du jour
// appel de la fonction d'initialisation
initCompteur( dateFin, dateDeb);            // la fonction a été renommée
</script>
<div style="float:right;">
    <h4>
<?php if($project['unlimited_days'] != 1)
{ ?>
    <img src="<?php echo base_url();?>images/clock.png" alt="" />
    <span id='update_day'><?php echo $day1 ; ?></span>:<span id='update_hour'><?php echo $hours ; ?></span>:<span id='update_minute'><?php echo $minuts ; ?></span>:<span id='update_second'><?php echo $seconds ; ?></span><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 } ?>

Le compte à rebours s affiche bien mais ne s'actualise toujours pas toutes les secondes. La console indique

ReferenceError: str_replace is not defined

.

Donc il n accède pas à la date de fin dans le code ligne 79

Code php :

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

$end_date = str_replace(' ', 'T', $end_date);

Mais je sais pas comment corriger la syntaxe de cette ligne

**NoSmoking** · 26/12/2013, 18h17

Cela va être dur mais on va essayer, d'autant que tu ne semble pas avoir bien lu/compris ce que l'on t'a expliqué jusqu'à présent.
- PHP = coté SERVEUR
- Javascript = coté CLIENT
une fois que l'on est coté CLIENT on ne parle plus de PHP.

la partie HTML doit être finalisée avant l'appel à la fonction de mise à jour de l'heure, dit plusieurs fois, donc ton script NE DOIT PAS être lancé avant que la page soit complète, dans ton code la partie HTML arrive après le lancement de la fonction.

Il me semble inutile de vouloir mettre des valeurs dans des éléments qui vont être modifié immédiatement.

la partie HTML devient

Code html :

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

1
2
3
4
5
6
7
8
9
<span id='update_day'></span>:
<span id='update_hour'></span>:
<span id='update_minute'></span>:
<span id='update_second'></span><br>
<span style="margin-left:12px;">&nbsp;</span>
<span style="font-size: 13px;margin: 0px 6px;">DAYS</span>
<span style="font-size: 13px;margin: 0px 6px;">HRS</span>
<span style="font-size: 13px;margin: 0px 6px;">MIN</span>
<span style="font-size: 13px;margin: 0px 6px;">SEC</span>

inutile donc de mélanger PHP et HTML dans cette partie et tu tirerais avantage à passer par les classes de style plutôt que de mettre le style dans les balises ( à voir plus tard, pas urgent dans ton cas)

La partie script, on a vu quelle "fonctionnait", je parle là que des fonctions

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

La partie lancement du script enfin, avec tes récupérations de date

Code :

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

1
2
3
4
var iTimer;
var dateFin = "<?php str_replace(' ', 'T', $project['end_date']) ?>"; // récupération et mise au format
var dateDeb = new Date();            // date du jour;
initCompteur( dateFin, dateDeb);  // appel de la fonction

Maintenant si on met bout à bout ce qui est ci dessus on obtient

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
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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>C'est pas simple et pourtant</title>
</head>
<body>
<span id='update_day'></span>:
<span id='update_hour'></span>:
<span id='update_minute'></span>:
<span id='update_second'></span><br>
<span style="margin-left:12px;">&nbsp;</span>
<span style="font-size: 13px;margin: 0px 6px;">DAYS</span>
<span style="font-size: 13px;margin: 0px 6px;">HRS</span>
<span style="font-size: 13px;margin: 0px 6px;">MIN</span>
<span style="font-size: 13px;margin: 0px 6px;">SEC</span>
<!-- ici on place la partie SCRIPT -->
<script>
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;
var dateFin = "<?php str_replace(' ', 'T', $project['end_date']) ?>"; // récupération et mise au format
var dateDeb = new Date();            // date du jour;
initCompteur( dateFin, dateDeb);  // appel de la fonction
</script>
</body>
</html>

Cela devrait fonctionner sauf erreur de frappe ou de copié/collé.

Une fois de plus
Merci de soigner l'indentation, pensez à ceux qui lisent!

**cedrus** · 26/12/2013, 18h57

En suivant ton code, il affiche pour indiquer le compteur "NaN: NaN: NaN: NaN"

Attention la condition

Code :

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

1
2
3
<?php if($project['unlimited_days'] != 1)
{ ?>
<img src="<?php echo base_url();?>images/clock.png" alt="" />

ne doit pas être supprimée !

Du coup voilà ce que j ai mis mais j'ai du encore faire une erreur:

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
<div style="float:right;">
<h4>
<?php if($project['unlimited_days'] != 1)
{ ?>
<img src="<?php echo base_url();?>images/clock.png" alt="" />
 
<span id='update_day'></span>:<span id='update_hour'></span>:<span id='update_minute'></span>:<span id='update_second'></span><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 } ?>
</h4></div>
<script>
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;
var dateFin = "<?php str_replace(' ', 'T', $project['end_date']) ?>"; // récupération date échéance et mise au format
var dateDeb = new Date();                   // date du jour
// appel de la fonction d'initialisation
initCompteur( dateFin, dateDeb);            // la fonction a été renommée
</script>

**NoSmoking** · 26/12/2013, 19h15

Envoyé par NoSmoking

Cela devrait fonctionner sauf erreur de frappe ou de copié/collé.

j'ai juste oublié de faire un écho de la valeur

Code php :

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

var dateFin = "<?php echo str_replace(' ', 'T', $project['end_date']) ?>"; // récupération date échéance et mise au format

Regarde ce que donne le code HTML t'aideras fortement.

**cedrus** · 26/12/2013, 19h36

En effet maintenant le décompte fonctionne sous Mozilla et Chrome ! En revanche parfois les secondes délirent, il enlève 2 secondes d'un coup ou ralenti pendant 2 secondes mais j'image que ça doit être du au serveur ou navigateur..

En revanche sur IE et Safari il affiche "NaN:NaN:NaN:NaN"

Peux tu me confirmer si je dois supprimer ce bout de code qui était au tout début :

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
<?php 
$date1 = $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));
                                                                
                                                                
$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;
 
?>

**NoSmoking** · 26/12/2013, 23h01

Peux tu me confirmer si je dois supprimer ce bout de code qui était au tout début :

attendu que tu ne t'en sert pas tu peux effectivement supprimer les lignes concernées.

En revanche sur IE et Safari il affiche "NaN:NaN:NaN:NaN"

il te faut formater la date différemment comme indiqué en début de discussion

Code :

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

1
2
// Init des variables par exemple, le format est adapté aux oldBrowsers
var dateFin = 'December 25, 2013 00:00:00'; // Date échéance

**cedrus** · 27/12/2013, 01h11

j y arrive pas, je tourne en rond.

**cedrus** · 27/12/2013, 15h50

Je trouve nul part d'info pour formater la date à partir d'un code déjà complexe comme nous avons intégré.

Tu me dis de faire afficher cette forme

Code :

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

var dateFin = 'December 25, 2013 00:00:00';

à partir de notre code déjà mis en place:

Code :

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

var dateFin = "<?php echo str_replace(' ', 'T', $project['end_date']) ?>";

C est au delà de mes compétences...

**NoSmoking** · 28/12/2013, 09h44

Le coté javascript, même si pas terrible fonctionne, tu as un problème PHP et il aurait été plus judicieux de le régler sur le forum adéquat.

Il y a 1000 et 1 façons de prendre en compte ton problème, mais la meilleur reste quand même d'apprendre les bases

A partir de '2013-12-31 11:45:12' on peut également arriver à 2013,12,31,11,45,12 qui est un format valide, voir le lien déjà fourni.

Code php :

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

1
2
3
// on remplace les -, espace et : par une virgule
// pour plus d'info regarder la documentation ne fait pas de mal
$date = str_replace( array(" ", "-", ":"), ',', $project['end_date']);

Les mois étant de 0 à 11 il faut décrémenter le mois

Code php :

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

1
2
3
4
5
6
// on récupère un tableau à partir d'une chaine
$date = explode( ',', $date);
// on enlève 1 au mois qui dans le tableau à la 2éme position donc à l'indice 1
$date[1] -= 1;
// on reconstruit la chaine
$date = implode( ',', $date);

en final on obtient donc 2013,11,31,11,45,12.

Il ne restera plus qu'a injecter cette valeur dans le code javascript

Code php :

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

var dateFin = new Date(<?php echo $date ?>); // Date échéance

Je trouve nul part d'info pour formater la date à partir d'un code

les bases et encore les bases.
Les meilleurs cours et tutoriels PHP

Compteur de temps pour vente flash

JavaScript

Discussions similaires

Partager

Partager