Générer une série d'URL à partir de la date et de l'heure

**plefever** · 07/04/2016, 07h09

Bonjour
Pour reprendre la suite d'une discussion de ce forum génial, je cherche à faire un "codage" automatique de la fin d'une URL (http://monadresse/000000000000)
Les quatre premiers zéro représente l'année
Les deux suivant le mois
Les deux suivants le jour
Et les quatre derniers l'heure
Pour l'heure, elle doit être en UTC =heure locale - 2 H en été, et - 1 H en hiver.
Elle doit aussi juste faire des sauts de 3H:
0300
0600
0900
1200
1500
1800
2100
Puis on passe au jour suivant.
En fait cette "variable" sur l'heure n'en est pas une, puisque c'est toujours la même séquence et ce sur 4 jours (ce qui fait un total de 25 adresses possibles)
Par contre il faudrait pouvoir afficher le moment précis.
Je vous invite à jeter un œil sur le fil que je cite plus haut pour mieux comprendre.

**SpaceFrog** · 07/04/2016, 09h29

ben une simple boucle avec un step de 3...

**SylvainPV** · 07/04/2016, 10h22

Il n'y a pas que l'heure qui doit être en UTC ! Si on décale l'heure, on décale aussi le jour autour de minuit.

Pourquoi créer ton propre format et ne pas utiliser un standard comme date.toUTCString() ou date.getTime() ?

**Beginner.** · 07/04/2016, 18h12

Je pense que tu aurais dû préciser un peu plus les choses en donnant un exemple complet comme sur l'autre fil, c'est-à-dire par exemple pour une date et une heure comme cela :

- Jeudi 07/04/2016| 02:00 tu veux obtenir ceci : 201604070200

Cela permet de comprendre notamment que pour les nombres inférieurs à 10 comme 7,4,2 et même "0" il faut ajouter un "0" devant : 07,04,02 et 00. Je me suis d’ailleurs aperçu que l'objet Date (que je découvre pour répondre à ta question) ne met pas ce "0" donc j'ai dû l'ajouter*...

Voilà ce que j'ai fait : http://jsbin.com/yuladogami/edit?js,output.

Cela fait comme ce site que tu as indiqué dans l'autre fil, c'est-à-dire cela commence à 02:00 du jour courant...

* J'ai découvert que les fonctions toLocaleDateString(), toLocaleTimeString() et toLocaleString() le faisaient déjà mais après il faut quand même travailler sur les chaines pour extraire les différentes parties (jours, mois, année, heure, minute...) mais pour afficher une date et une heure comme au début du code cela aurait été mieux de les utiliser...

**plefever** · 11/04/2016, 22h50

Je vois un peu comment procéder..Mais j'aimerai mieux "coller" à ce qu'on avait développé sur l'autre fil. Je ne suis pas chez moi en ce moment et j'ai un Internet "limité"..il me tarde d'essayer mieux tout ça.
Merci pour vos lumières

**Beginner.** · 13/04/2016, 01h07

Ben une fois que tu sais "fabriquer" les url des images tu peux alors afficher les images et les faire défiler avec la roulette de la souris comme dans l'autre fil... Or justement pour fabriquer ces url il te fallait la partie Date et Heure chose à laquelle on a répondu...

Maintenant si tu as besoin d'autre chose, il faudrait que tu donnes un exemple comme sur l'autre fil où tu avais donné l'url de base et deux selects pour les régions et les types (chose qu'on ne peut pas choisir à ta place).

**plefever** · 17/04/2016, 16h05

De retour à la civilisation, c'est à dire avec un débit Internet à volonté, j'ai pu appliquer vos précieux conseils (merci Beginner) et finaliser (ou presque) la première version (celle de l'autre fil).
Si ça vous intéresse :

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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
<!DOCTYPE html>
 
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Meteo Consorzio Lamma</title>
 
    <script type="text/javascript" language="Javascript">
 
function initInputonload() {
 
    var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel"
 
    if (document.body.attachEvent)
          document.body.attachEvent("on" + mousewheelevt, rotateimage);
        else if (document.body.addEventListener)
                 document.body.addEventListener(mousewheelevt, rotateimage, false);
 
    conteneur.innerHTML = "";
    initInput();
 
}
 
 
 
function initInput() {
 
    var url = document.getElementById("affichage").value ;       
    var type = document.getElementById("type").value;
    var region = document.getElementById("region").value;    
 
    var n = url.lastIndexOf("/"); 
    url = url.slice(0,n+1) + type + "_" + region + "_web_*.png";
    document.getElementById("affichage").value = url;
 }
 
function afficheImages() {
 
 
    if(document.getElementById("offline").checked) {
 
        afficheImagesHorsConnexion();
        return;        
    }
 
    var url = document.getElementById("affichage").value;
 
    if (url.indexOf("*") === -1) {
 
      document.getElementById("msg").innerHTML = "L'url doit contenir le caractère '*' ! ";
      return;
    }
 
    var nbrBegin = +document.getElementById("nbrBegin").value;
    var nbrEnd = +document.getElementById("nbrEnd").value; 
    var monImg ;  
    var conteneur = document.getElementById("conteneur");
 
    conteneur.innerHTML = "";
 
    for (var i= nbrBegin; i<= nbrEnd; i++) {
 
        monImg = document.createElement('img');     
        monImg.src = url.replace("*", i);
        monImg.style.visibility = 'hidden' ;
        monImg.style.position = "absolute";
        conteneur.appendChild(monImg);           
    }
 
    document.images[0].style.visibility = "visible";    
 
}
 
 
 
function afficheImagesHorsConnexion() {
 
    var url = document.getElementById("affichage").value;    
    var n = url.lastIndexOf("/");          
    var pathImages = "./" + document.title + "_files" + url.slice(n);    
 
    var nbrBegin = +document.getElementById("nbrBegin").value;
    var nbrEnd = +document.getElementById("nbrEnd").value; 
    var monImg ;  
    var conteneur = document.getElementById("conteneur");
 
    conteneur.innerHTML = "";
 
    for (var i= nbrBegin; i<= nbrEnd; i++) {
 
        monImg = document.createElement('img');     
        monImg.src = pathImages.replace("*", i);
        monImg.style.visibility = 'hidden' ;
        monImg.style.position = "absolute";        
        conteneur.appendChild(monImg);           
    }
 
    document.images[0].style.visibility = "visible";
 
}
 
 
var myimages = document.images;
var currentImage = 0 ;
var nextImage = 0 ;
 
function rotateimage(e) {
 
    if(myimages.length === 0) return ;
 
    var evt = window.event || e     //equalize event object
    var delta = evt.detail ? evt.detail * (-120) : evt.wheelDelta     //delta returns +120 when wheel is scrolled up, -120 when scrolled down
    nextImage = (delta <= -120) ? nextImage + 1 : nextImage - 1 //move image index forward or back, depending on whether wheel is scrolled down or up    
 
    nextImage = (nextImage < 0) ? 0 : (nextImage > myimages.length - 1) ? myimages.length - 1 : nextImage
 
 
    myimages[currentImage].style.visibility = "hidden";    
    myimages[nextImage].style.visibility = "visible";
    currentImage = nextImage ;
 
    if (evt.preventDefault)
        //disable default wheel action of scrolling page
        evt.preventDefault()
    else
        return false ;
 
}
 
</script>
 
</head>
 
<body onload="initInputonload()" style="font-family:verdana; font-size:13px">
 
    <div>
		<table border="0" width="100%" cellspacing="0" cellpadding="0">
			<tr>
				<td>
				<div class="onoffswitch">
    <p style="margin-top: 0; margin-bottom: 0">
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="offline" checked>
    <label class="onoffswitch-label" for="offline">
        <span class="onoffswitch-inner"></span>
        <span class="onoffswitch-switch"></span>
    </label>
</div> 
    </td>
				<td>
				<p style="margin-top: 0; margin-bottom: 0"><b><font face="Arial" size="5" color="#333333">
			<span>
			<a target="_blank" href="http://www.lamma.rete.toscana.it/mare/modelli/vento-e-mare" style="text-decoration:none; vertical-align:middle">
				Consorzio Lamma</a>&nbsp; </span></font></b>   
        &nbsp;<select size="1" id="region" onchange="initInput()" name="D1">
            <option value="AA">Méditerranée</option>
			<option value="H">Med - occ</option>
			<option value="AE">Med - cen</option>
			<option value="I">Med - ori</option>
			<option value="A">Ligure</option>
			<option value="D">Mer Tyrrhénienne</option>
			<option value="B">Sardaigne</option>
			<option value="C">Sicile</option>
			<option value="E">Mer Ionienne</option>
			<option value="F">Adriatique meridionale</option>
			<option value="G">Adriatique septentrionale</option>
			<option value="M">Golfe de Gênes</option>
			<option value="J">Mer de Sardaigne</option>
			<option value="K">Baléares</option>
			<option value="R">Valencia</option>
			<option value="AB">Canal de Sardaigne</option>
			<option value="AC">Tunisie</option>
			<option value="Y">Mer d'Alboran</option>
			<option value="Z">Golfe du Lion</option>
			<option value="Q">Côte d'Azur</option>
			<option value="S">Corse</option>
			<option value="L">Elbe</option>
			<option value="N">Bonifacio</option>
			<option value="O">Îles Pontines</option>
			<option value="P">Îles Éoliennes</option>
			<option value="X">Ustica</option>
			<option value="T">Istrie</option>
			<option value="U">Îles Tremiti</option>
			<option value="W">Golfe de Tarente</option>
			<option value="V">Albanie</option>
			<option value="AF">Grèce</option>
			<option value="AG">Péninsule Chalcidique</option>
			<option value="AH">Îles grecques</option>
			<option value="AI">Crète</option>
			<option value="AL">Turquie</option>
			<option value="AN">Chypre</option>
			<option value="AM">Israël</option>
			<option value="AK">Égypte</option>
			<option value="AJ">Crète du sud</option>
			<option value="AD">Golfe de Syrte</option>
 
        </select>
 
        <select size="1" id="type" onchange="initInput()" name="D2">
            <option value="wind10m">Vent</option>
			<option value="mwp">Houle</option>
			<option value="swh">Hauteur des vagues</option>
			<option value="windgust">Rafales</option>
			<option value="sst">Température de la mer</option>
			<option value="pcp">Précipitations</option>
			<option value="ct">Nuages</option>
        </select>  
 
        <select size="1" id="nbrEnd" onchange="changementParametre(event)" name="D3" >
            <option value="10">1 jour</option>
			<option value="36">2 jours</option>
			<option value="44">3 jours</option>
			<option value="50">4 jours</option>
			<option value="57" selected>5 jours</option>
 
        </select>&nbsp;&nbsp;  
        <input type="button" name="RefreshButton" value="AFFICHER"  class="styled-button-1" onclick="afficheImages()">
        <style type="text/css">
.styled-button-1 {
cursor: pointer;
	-webkit-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
	-moz-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
	box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
	color:#707070;
	background-color:#EEEEEE;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border:none;
	font-family:'Helvetica Neue',Arial,sans-serif;
	font-size:16px;
	font-weight:700;
	height:36px;
	padding:4px 16px;
	border: 2px solid #999999;
}
 </style>
        <input type="text" style="display:none" id="affichage" value="http://www.lamma.rete.toscana.it/models/ventoemare/TYPE_REGION_web_*.png" ;="" size="79" name="T1"> 
        <input type="number" style="display:none"id="nbrBegin" onchange="changementParametre(event)" value="1" min="1" max="61" name="T2" size="20">
 
        <b>&nbsp; Ctrl + S</b> pour enregistrer les données. 
    </td>
				<td>    <style type="text/css">
.onoffswitch {
    position: relative; width: 160px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #999999; border-radius: 5px;
}
.onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 34px; padding: 0; line-height: 34px;
    font-family:'Helvetica Neue',Arial,sans-serif;
	font-size:16px;
	font-weight:700;
    box-sizing: border-box;
}
.onoffswitch-inner:before {
    content: "HORS LIGNE";
    padding-left: 10px;
    background-color: #F00000; color: #FFFFFF;
}
.onoffswitch-inner:after {
    content: "EN LIGNE";
    padding-right: 10px;
    background-color: #EEEEEE; color: #707070;
    text-align: center;
}
.onoffswitch-switch {
    display: block; width: 14px; margin: 3px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 136px;
    border: 2px solid #999999; border-radius: 5px;
    transition: all 0.3s ease-in 0s; 
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px; 
}
</style></td>
			</tr>
		</table>
		</div> 
 
    <hr>
 
    <div id="conteneur">
		<img src="../Nouveau%20dossier2/Meteo%20Consorzio%20Lamma_files2/wind10m_AA_web_1.png" style="visibility: visible; position: absolute;"><img src="../Nouveau%20dossier2/Meteo%20Consorzio%20Lamma_files2/wind10m_AA_web_2.png" style="visibility: hidden; position: absolute;"><img src="../Nouveau%20dossier2/Meteo%20Consorzio%20Lamma_files2/wind10m_AA_web_3.png" style="visibility: hidden; position: absolute;"></div>
 
 
</body></html>

Ça marche plutôt bien (grâce à notre ami Beginner. Merciiii)
Idéalement lorsqu'on est "hors connexion" il serait bien que les déroulants ne propose que ce qu'il y a d'enregistré sur le disque dur. Mais là, c'est une autre paire de manches.
Par contre pour la version avec la codification avec la date, je ne m'en sort pas.... Le lien de "Beginner" est bien, mais je sèche sur le décalage UTC / heure réelle et sur la mise en forme de la fin de l'URL. Un peu de code en dira plus :

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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
<!DOCTYPE html>
 
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Meteorama</title>
 
    <script type="text/javascript" language="Javascript">
 
function initInputonload() {
 
    var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel"
 
    if (document.body.attachEvent)
          document.body.attachEvent("on" + mousewheelevt, rotateimage);
        else if (document.body.addEventListener)
                 document.body.addEventListener(mousewheelevt, rotateimage, false);
 
    conteneur.innerHTML = "";
    initInput();
 
}
 
 
 
function initInput() {
 
    var url = document.getElementById("affichage").value ;       
    var type = document.getElementById("type").value;
    var region = document.getElementById("region").value;    
 
    var n = url.lastIndexOf("/"); 
    url = url.slice(0,n+1) + type + "-" + region + "-*.gif";
    document.getElementById("affichage").value = url;
 }
 
function afficheImages() {
 
 
    if(document.getElementById("offline").checked) {
 
        afficheImagesHorsConnexion();
        return;        
    }
 
    var url = document.getElementById("affichage").value;
 
    if (url.indexOf("*") === -1) {
 
      document.getElementById("msg").innerHTML = "L'url doit contenir le caractère '*' ! ";
      return;
    }
 
    var nbrBegin = +document.getElementById("nbrBegin").value;
    var nbrEnd = +document.getElementById("nbrEnd").value; 
    var monImg ;  
    var conteneur = document.getElementById("conteneur");
 
    conteneur.innerHTML = "";
 
    for (var i= nbrBegin; i<= nbrEnd; i++) {
 
        monImg = document.createElement('img');     
        monImg.src = url.replace("*", i);
        monImg.style.visibility = 'hidden' ;
        monImg.style.position = "absolute";
        conteneur.appendChild(monImg);           
    }
 
    document.images[0].style.visibility = "visible";    
 
}
 
 
 
function afficheImagesHorsConnexion() {
 
    var url = document.getElementById("affichage").value;    
    var n = url.lastIndexOf("/");          
    var pathImages = "./" + document.title + "_files" + url.slice(n);    
 
    var nbrBegin = +document.getElementById("nbrBegin").value;
    var nbrEnd = +document.getElementById("nbrEnd").value; 
    var monImg ;  
    var conteneur = document.getElementById("conteneur");
 
    conteneur.innerHTML = "";
 
    for (var i= nbrBegin; i<= nbrEnd; i++) {
 
        monImg = document.createElement('img');     
        monImg.src = pathImages.replace("*", i);
        monImg.style.visibility = 'hidden' ;
        monImg.style.position = "absolute";        
        conteneur.appendChild(monImg);           
    }
 
    document.images[0].style.visibility = "visible";
 
}
 
 
var myimages = document.images;
var currentImage = 0 ;
var nextImage = 0 ;
 
function rotateimage(e) {
 
    if(myimages.length === 0) return ;
 
    var evt = window.event || e     //equalize event object
    var delta = evt.detail ? evt.detail * (-120) : evt.wheelDelta     //delta returns +120 when wheel is scrolled up, -120 when scrolled down
    nextImage = (delta <= -120) ? nextImage + 1 : nextImage - 1 //move image index forward or back, depending on whether wheel is scrolled down or up    
 
    nextImage = (nextImage < 0) ? 0 : (nextImage > myimages.length - 1) ? myimages.length - 1 : nextImage
 
 
    myimages[currentImage].style.visibility = "hidden";    
    myimages[nextImage].style.visibility = "visible";
    currentImage = nextImage ;
 
    if (evt.preventDefault)
        //disable default wheel action of scrolling page
        evt.preventDefault()
    else
        return false ;
 
}
 
</script>
 
</head>
 
<body onload="initInputonload()" style="font-family:verdana; font-size:13px">
 
    <div>
		<table border="0" width="100%" cellspacing="0" cellpadding="0">
			<tr>
				<td>
				<div class="onoffswitch">
    <p style="margin-top: 0; margin-bottom: 0">
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="offline" checked>
    <label class="onoffswitch-label" for="offline">
        <span class="onoffswitch-inner"></span>
        <span class="onoffswitch-switch"></span>
    </label>
</div> 
    </td>
				<td>
				<p style="margin-top: 0; margin-bottom: 0"><b><font face="Arial" size="5" color="#333333">
				<span>
				<a target="_blank" href="http://www.meteorama.fr/" style="text-decoration:none; vertical-align:middle">
				Météorama</span></a>&nbsp; </span></font></b>   
        &nbsp;<select size="1" id="region" onchange="initInput()" name="D1">
            <option value="lion-provence">Lion - Provence</option>
			<option value="corse">Corse</option>
 
 
        </select>
 
        <select size="1" id="type" onchange="initInput()" name="D2">
            <option value="seawind">Vent</option>
			<option value="waveheight">Vagues</option>
			<option value="seatemp">Temp de la mer</option>
 
        </select>  
 
        <select size="1" id="nbrEnd" onchange="changementParametre(event)" name="D3" >
            <option value="10">1 jour</option>
			<option value="36">2 jours</option>
			<option value="44">3 jours</option>
			<option value="50">4 jours</option>
			<option value="57" selected>5 jours</option>
 
        </select>&nbsp;&nbsp;  
        <input type="button" name="RefreshButton" value="AFFICHER"  class="styled-button-1" onclick="afficheImages()">
        <style type="text/css">
.styled-button-1 {
cursor: pointer;
	-webkit-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
	-moz-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
	box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
	color:#707070;
	background-color:#EEEEEE;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border:none;
	font-family:'Helvetica Neue',Arial,sans-serif;
	font-size:16px;
	font-weight:700;
	height:36px;
	padding:4px 16px;
	border: 2px solid #999999;
}
 </style>
        <input type="text" style="display:none" id="affichage" value="http://meteomaps.s3.amazonaws.com/eltiempo/datamaps/TYPE-REGION-*.gif" ;="" size="79" name="T1"> 
        <input type="number" style="display:none"id="nbrBegin" onchange="changementParametre(event)" value="1" min="1" max="61" name="T2" size="20">
 
        <b>&nbsp; Ctrl + S</b> pour enregistrer les données. 
    </td>
				<td>    <style type="text/css">
.onoffswitch {
    position: relative; width: 160px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #999999; border-radius: 5px;
}
.onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 34px; padding: 0; line-height: 34px;
    font-family:'Helvetica Neue',Arial,sans-serif;
	font-size:16px;
	font-weight:700;
    box-sizing: border-box;
}
.onoffswitch-inner:before {
    content: "HORS LIGNE";
    padding-left: 10px;
    background-color: #F00000; color: #FFFFFF;
}
.onoffswitch-inner:after {
    content: "EN LIGNE";
    padding-right: 10px;
    background-color: #EEEEEE; color: #707070;
    text-align: center;
}
.onoffswitch-switch {
    display: block; width: 14px; margin: 3px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 136px;
    border: 2px solid #999999; border-radius: 5px;
    transition: all 0.3s ease-in 0s; 
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px; 
}
</style></td>
			</tr>
		</table>
		</div> 
 
    <hr>
 
    <div id="conteneur">
		<img src="../Nouveau%20dossier2/Meteo%20Consorzio%20Lamma_files2/wind10m_AA_web_1.png" style="visibility: visible; position: absolute;"><img src="../Nouveau%20dossier2/Meteo%20Consorzio%20Lamma_files2/wind10m_AA_web_2.png" style="visibility: hidden; position: absolute;"><img src="../Nouveau%20dossier2/Meteo%20Consorzio%20Lamma_files2/wind10m_AA_web_3.png" style="visibility: hidden; position: absolute;"></div>
 
 
</body></html>

Ici le troisième "input" doit être supprimé puisque c'est là qu'il faut insérer les nombres constitué de Année, mois, jour, et les suites 0000,0300,0600,0900,1200,1500,1800,2100 correspondant au heures 0200,0500,0800,1100,1400,1700,2000,2300...
Et donc pour - Jeudi 07/04/2016| 05:00 obtenir ceci : 201604070300 en été et 0400 en hiver. Maintenant je crois me souvenir que l'on peut faire appel à l'heure UTC et non à l'heure locale pour générer une date/heure. Il faut que je fasse une petite recherche, je crois l'avoir déjà appliqué autrefois..

**Beginner.** · 17/04/2016, 22h00

Salut,

- Je ne comprends pas, apparemment les deux codes que tu as postés sont identiques, non ?

- Sinon pour le soucis que tu évoques, il suffit d'ajouter un décalage de une ou deux heures selon les cas...

J'ai ajouté une variable var decalage = 2; dans le code ici : http://jsbin.com/hasewetami/edit?js,output. Ainsi on obtient 201604170000 pour Dimanche 17/04/2016| 02:00 et 201604170300 pour Dimanche 17/04/2016| 05:00...

Et pour un décalage de 1h il suffit d'affecter un à la variable decalage ou remplacer var decalage = 2; par var decalage = 1;

**plefever** · 18/04/2016, 06h19

J'ai retrouvé le "getUTCHours"
Ce qui donne sur le script:

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
<script id="jsbin-javascript">
var res1 = document.getElementById("res1");
 
var date = new Date();
var tab_jour=new Array("Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi");
var day = date.getDay();
var ladate = date.getDate(); if (ladate<10) ladate = "0" + ladate ;
var month = date.getMonth() + 1; if (month<10) month = "0" + month ;
var year = date.getFullYear();
var h = date.getUTCHours(); if (h<10) h = "0" + h ;
var m = date.getMinutes(); if (m<10) m = "0" + m ;
var s = date.getSeconds(); if (s<10) s = "0" + s ;
 
var currenteDate = "Nous sommes le : " + tab_jour[day] + " " +  ladate + "/" + month +"/"+ year ;
var currenteHour = "Il est : "+ h+":"+m+":"+s+" UTC" ;
 
res1.innerHTML = currenteDate + "<br>" + currenteHour+ "<br>" + "-----" + "<br><br>";
console.log(currenteDate + "\n" + currenteHour);
 
//date.setDate(28); date.setMonth(3); date.setFullYear(2016);
//date.setHours(2); date.setMinutes(0); date.setSeconds(0);
 
//-----------------------
var tabDateHours =[];
var tabDateHoursImages =[];
date.setHours(2); date.setMinutes(0); date.setSeconds(0);
 
for(i = 0; i<25;i++){
 
  day = date.getDay();  
  year = date.getFullYear(); 
  month = date.getMonth() + 1; if (month<10) month = "0" + month ;
  ladate = date.getDate(); if (ladate<10) ladate = "0" + ladate ;
  h = date.getUTCHours(); if (h<10) h = "0" + h ;
  m = date.getMinutes(); if (m<10) m = "0" + m ;
 
  tabDateHoursImages[i]= year + month + ladate + h + m ;
  tabDateHours[i]= tab_jour[day] + " " +  ladate + "/" + month +"/"+ year + "| "+ h+":"+m+":" +"| ----> ";
  date.setHours(date.getHours()+3);
 
  document.write (i + " - "+tabDateHours[i] + " "+ tabDateHoursImages[i] + "<br>");
}
 
 
 
</script>
</body>
</html>

Là on ne se soucie plus du décalage hiver/été
Mais comment adapter ce script pour générer mes adresses?

**Beginner.** · 18/04/2016, 15h54

Ah oui bien vu, effectivement cette fonction semble bien fonctionner, je l'ai testée pour des dates en été comme en hiver... Le code que tu as posté ne fonctionne pas chez moi, il manque des morceaux... Mais j'ai modifié l'autre code : http://jsbin.com/lehoqeyima/edit?js,output (j'ai ajouté h2 = date.getUTCHours() ; if (h2<10) h2 = "0" + h2 ;). (Il y a aussi une version UTC des autres fonctions getUTCDay(); getUTCDate();getUTCMinutes();)

On a donc un décalage comme dans le site : par exemple :

Pour Jeudi 28/01/2016| 02:00 on obtient 201601280100
Pour Lundi 18/04/2016| 05:00 on obtient 201604180300

C'est bien ce que tu veux ?

------------

Sinon pour générer les adresses des images eh bien il suffit de placer le caractère "*" dans l'url là où doit se trouver la partie Date et Heure...
Je vais voir si tu as mis les url dans ton code...

**plefever** · 18/04/2016, 19h46

oui c'est bien les bons "codages" d'images à récupérer. Mais comment maintenant arriver a partir de cela à obtenir réellement les images dans le lecteur ?

Aujourd’hui 02 :00 http://meteomaps.s3.amazonaws.com/el...1603300000.gif
Aujourd’hui 05 :00 http://meteomaps.s3.amazonaws.com/el...1603300300.gif
Aujourd’hui 08 :00 http://meteomaps.s3.amazonaws.com/el...1603300600.gif
Aujourd’hui 11 :00 http://meteomaps.s3.amazonaws.com/el...1603300900.gif
Aujourd’hui 14 :00 http://meteomaps.s3.amazonaws.com/el...1603301200.gif
Aujourd’hui 17 :00 http://meteomaps.s3.amazonaws.com/el...1603301500.gif
Aujourd’hui 20 :00 http://meteomaps.s3.amazonaws.com/el...1603301800.gif
Aujourd’hui 23 :00 http://meteomaps.s3.amazonaws.com/el...1603302100.gif

Demain 02 :00 http://meteomaps.s3.amazonaws.com/el...1603310000.gif
Demain 02 :00 http://meteomaps.s3.amazonaws.com/el...1603310300.gif
etc...
Dans l'autre version, c'était un chiffre de début et un chiffre de fin et entre les deux, on faisait plus 1 à l'image précédente. Mais là c'est sur la fin de l'URL qu'il faut introduire ces "codes" de dates et heures comme générée dans ton script...
Je ne m'en sort pas

**Beginner.** · 18/04/2016, 20h11

Envoyé par plefever

Aujourd’hui 02 :00 http://meteomaps.s3.amazonaws.com/eltiempo/datamaps/seawind-lion-provence-201603300000.gif

Dans l'autre version, c'était un chiffre de début et un chiffre de fin et entre les deux, on faisait plus 1 à l'image précédente. Mais là c'est sur la fin de l'URL qu'il faut introduire ces "codes" de dates et heures comme générée dans ton script...
Je ne m'en sort pas

Oui mais là c'est le même principe sauf qu'au lieu d'avoir un nombre tu as un "code dateheure" comme 201603300000

Les url sont de cette forme apparemment : http://meteomaps.s3.amazonaws.com/eltiempo/datamaps/TYPE-REGION-*.gif

Et il faut remplacer TYPE et REGION par le type et la région sélectionnés et le caractère * il faut le remplacer par le "code dateheure"...

Bon je vais essayer de la faire mais avec l'ancien code et tu l'adapteras à ta guise...

----

Par contre il y a un problème : inline on fait comme ce site que tu as indiqué dans l'autre fil, c'est-à-dire on commence à 02:00 du jour courant... Mais hors connexion cela fera pareil or si tu utilises la page un autre jour cela commencera à partir de ce jour (courant) et non à partir du jour d'enregistrement...

Il faudrait donc un moyen d'entrer la date de départ souhaitée... Est-ce que cela te va si on met un select avec la possibilité de choisir + ou - 5 jours autour de la date courante ?

**plefever** · 18/04/2016, 20h54

Ce n'est pas un problème si la date courante est dépassée puisque les données seront dépassées aussi. Seules les données présente et à venir sont intéressante. Si j'ai bien compris ton propos...

**Beginner.** · 18/04/2016, 20h59

Ok mais je viens de voir qu'il existe un input date bien pratique pour sélectionner une date...Par contre il ne fonctionne pas sur tous les navigateurs mais je crois que tu utilises Chrome, non ? Pour Chrome c'est bon...

**plefever** · 18/04/2016, 21h08

J'ai un faible pour "chrome" c'est vrai

**Beginner.** · 18/04/2016, 21h53

Ok. Il y a aussi une autre chose : As-tu remarqué qu'en fait il peut y avoir plus de 25 images... La première commence à 2h00 du jour courant mais plus on avance dans la journée et plus il y a d'image. En fait ça se décale à chaque fois par rapport à l'heure...

Pourquoi tu as mis ces chiffres (10,36,44...) comme "value" :

Code javascript :

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

1
2
3
4
5
6
7
<select size="1" id="nbrEnd" onchange="changementParametre(event)" name="D3">
            <option value="10">1 jour</option>
            <option value="36">2 jours</option>
            <option value="44">3 jours</option>
            <option value="50">4 jours</option>
            <option value="57" selected="">5 jours</option>
 </select>

Cela devrait être 8,16,24... car on a 24h = 8x3h, non ?

**plefever** · 18/04/2016, 22h01

Non, non, rien à voir. Ca c'était pour l'autre site. Au lieu de choisir le nombre d'images, j'ai simplement regardé combien d'images il fallait pour un jour ou pour deux jours...
Mais pour cette autre "mouture", il faut garder les 25 images sans autres choix.
La balise de nombre de jour n'existe pas dans cette version.

**Beginner.** · 18/04/2016, 22h06

Donc pas besoin d'ajouter un select "jours" ?

Sinon encore une fois : As-tu remarqué qu'en fait il peut y avoir plus de 25 images ? La première commence à 2h00 du jour courant mais plus on avance dans la journée et plus il y a d'image. En fait ça se décale à chaque fois par rapport à l'heure...

Bon pour l'instant je fais 25 images avec la première qui commence à 2h00 du jour courant...

**plefever** · 18/04/2016, 22h11

Si on regarde le site, maintenant à cette heure-ci, on voit que la première image date de 02h du matin (local) de ce jour et la dernière mercredi à 23H local. Ils changeront leurs données le 19 à 2H du matin. Ca reste toujours le même nombre d'images

**plefever** · 18/04/2016, 22h12

Je viens de taper une adresse qui n'est pas encore disponible sur leur site, et de fait il est possible d'avoir une image qui n'est pas encore publiée... jeudi 02H00, 05h00, 08H00 existent déjà mais pas encore disponible sur leur présentation... intéressant. Merci, je n'avais jamais remarqué ça

Générer une série d'URL à partir de la date et de l'heure

JavaScript

Discussions similaires

Partager

Partager