"event timer" non fonctionnel.

**nocymer** · 10/09/2019, 22h23

Bonjour voila maintenant quelques heures que je développe une page web dans le but est de crée un "event timer" mais il ne fonctionne pas pouvez vous me dire qu'est ce qui ne vas pas avec mon code

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
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html>
    <head>
	      <title>Borderlands 3</title>
	      <style type="text/css">
                body{
                        background: #f6f6f6;
                }
 
                .countdownContainer{
                        position: absolute;;
                        top: 50%;
                        left: 50%;
                        transform : translateX(-50%) translateY(-50%);
                        text-align: center;
                        background: #FFA500;
                        border: 1px solid #999;
                        padding: 10px;
                        box-shadow:  0 0 5px 3px #ccc;
                }
 
                .info {
                        font-size: 80px;
                }
               </style>
    </head>
	<body>
		<table class="countdownContainer">
			<tr class="info">
				<td colspan="4" class="info">BORDERLANDS 3</td>
			</tr>
			<tr class="info">
				<td id="days">0</td>
				<td id="hours">0</td>
				<td id="minutes">0</td>
				<td id="seconds">0</td>
			</tr>
			<tr>
				<td>Days</td>
				<td>Hours</td>
				<td>Minutes</td>
				<td>Seconds</td>
			</tr>
		</table>
		<script type="text/javascript">
                                        
                                        function countdown(){
                                                var now = new Date();
                                                var eventDate = new Date(now.getFullYear(),09,13);
                                                var currentTime = now.getTime();
                                                var eventTime = eventDate.getTime();
                                                var remTime = eventTime - currentTime;
 
                                                var s = Math.floor(remTime / 1000);
                                                var m = Math.floor(s / 60);
                                                var h= Math.floor(m/ 60);
                                                var d= Math.floor(h/ 24);
 
                                                h %= 24;
                                                m %= 60;
                                                s %= 60;
 
                                                h = (h < 10) ? "0" + h : h;
                                                m = (m < 10) ? "0" + m : m;
                                                s = (s < 10) ? "0" + s : s;
 
                                                document.getElementById("days").textContent = d;
                                                document.getElementById("days").innerText = d;
                                                document.getElementById("hours").textContent = h;
                                                document.getElementById("hours").innerText = h;
                                                document.getElementById("minutes").textContent = m;
                                                document.getElementById("minutes").innerText = m;
                                                document.getElementById("seconds").textContent = s;
                                                document.getElementById("seconds").innerText = s;
 
                                                setTimeout(countdown,1000);
                                }
                </script>
	</body>
</html>

merci d'avance Cordialement.

**psychadelic** · 10/09/2019, 23h53

simple, ta fonction countDown() n'est jamais appelée...

sinon tu a une erreur :L’encodage de caractères du document HTML n’a pas été déclaré. Le document sera affiché avec des caractères incorrects pour certaines configurations de navigateur si le document contient des caractères en dehors de la plage US-ASCII. L’encodage de caractères de la page doit être déclaré dans le document ou dans le protocole de transfert.

ce qui ce règle par l'utilisation correct de la syntaxe HTML5 :

Code HTML :

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

1
2
3
4
5
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Borderlands 3</title>

mais de toutes façons tu utilises un setTimeout alors que pour un countDown il faut utiliser un setInterval.

je dois avoir un code dans ce genre quelque part, le temps de le retrouver et je le post à la suite...

**psychadelic** · 11/09/2019, 00h26

Vala, j'ai retrouvé, du coup je l'ai mis à ta sauce ( ça fait moins de 30 lignes)

Je me suis aussi rendu compte que ton calcul de la date butoir était faux, Septembre correspond à l'index 8 => https://developer.mozilla.org/fr/doc...s_globaux/Date

j'en ai aussi profité pour nettoyer un peu ton code (désolé, c'est plus fort que moi)

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
72
73
74
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Borderlands 3</title>
  <style type="text/css">
    body {
      background: #f6f6f6;
    }
    table {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      text-align: center;
      background: #FFA500;
      border: 1px solid #999;
      padding: 10px;
      box-shadow: 0 0 5px 3px #ccc;
    }
    tbody, thead {
      font-size: 80px;
      white-space: nowrap;
    }
    span {
      font-size: 120px;
      font-weight: bold;
      vertical-align: -0.10em;
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr><td colspan="4">BORDERLANDS <span>3</span></td></tr>
    </thead>
    <tbody>
      <tr><td>0</td><td>0</td><td>0</td><td>0</td></tr>
    </tbody>
    <tfoot>
      <tr><td>Days</td><td>Hours</td><td>Minutes</td><td>Seconds</td></tr>
    </tfoot>
  </table>
  <script>
    const td_Day   = document.querySelector('tbody').rows[0].cells[0]
        , td_Hour  = document.querySelector('tbody').rows[0].cells[1]
        , td_Min   = document.querySelector('tbody').rows[0].cells[2]
        , td_Sec   = document.querySelector('tbody').rows[0].cells[3]
        , one_Sec  = 1000
        , one_Min  = one_Sec * 60
        , one_Hour = one_Min * 60 
        , one_Day  = one_Hour * 24
        , Finish   = new Date(2019, 08, 13) // 08 == septembre, car 00 == Janvier
 
    let timerInterval = setInterval(_=>
      {
      let now = new Date().getTime()
        , tim = Finish - now
 
      if (tim >= 0)
        {
        td_Day.textContent  = Math.floor(tim / one_Day)
        td_Hour.textContent = ("0" + Math.floor((tim % one_Day ) / one_Hour)).slice(-2)
        td_Min.textContent  = ("0" + Math.floor((tim % one_Hour) / one_Min )).slice(-2)
        td_Sec.textContent  = ("0" + Math.floor((tim % one_Min ) / one_Sec )).slice(-2)
        }
      else
        {
        clearInterval(timerInterval) 
        }  
      }, one_Sec )
  </script>
</body>
</html>

"event timer" non fonctionnel.

JavaScript

Vue hybride

Discussions similaires

Partager

Partager