Cambio colore cella in base all'orario

E

Epcentro

Nuovo Utente
10 Apr 2008
6
0
0
Sto crando una pagina "palinsesto" per una radio "artigianale".

Ho una classica tabella di quattro colonne ed una decina di righe.

Ogni riga rappresenta una fascia oraria:

(cella vuota) 8.30 - 9.00 trasmissione di condotta da
(cella vuota) 9.00 - 9.30 trasmissione di condotta da etc etc......

avrei bisogno che in (cella vuota) appaia o un colore o un'immagine (tipo on air now) in base all'orario attuale e che, ovviamente, questa si spostasse alla cella vuota successiva allo scadere dell'ora o della mezz'ora.....

Ho provato ad adattare uno script trovato qui http://javascript.html.it/demo/javascript/017/esempio.htm
inserire dei css che rinominano le varie celle (ts_1 ts_2 tr_3....), ma non riesco riesco ad adattare modificando questa parte di codice:

Codice: 
var now = new Date();
var now = new Date();
var hours = now.getHours();
var psj=0;

//18-19 night
if (hours > 17 && hours < 20){
document.write('<body bgcolor="orange" text="#FFFFFF">')
}


ho fatto tutte le variabili possibili,
Codice: 
document.write('<class="ts_12" style="background-color: #FF0000">')

document.write('<ts_12="background-color: #FF0000">')

document.write('<ts_12="#FF0000">')

document.write('<body ts_12="#FF0000">')

document.write('<body tdts_12="#FF0000">')

document.write('<body tdcolor ts_12="#FF0000">')

document.write('<tdcolor ts_12="#FF0000">')

document.write('<color ts_12="#FF0000">')
ma nulla.....qualcuno sa consigliarmi?
:hammer:

I tentativi sono qui
 
Per modificare il colore di una cella dovresti ottenere nello script JavaScript il riferimento alla cella.
Ad esempio:
<table>
<tr> <td id="cella1"> </td> ... ... ... </tr>
...
...
<tr> <td id="cella10"> </td> ... ... ... </tr>
</table>

...

<script type="text/javascript">

var cella1 = document.getElementById('cella1');
...
...
var cella10 = document.getElementById('cella10');


if (hours>17 && hours<20)
cella1.style.backgroundColor = "Yellow";

...

</script>
Clicca per allargare...

Sono andato un pò a memoria... cmq dovrebbe funzionare! :rolleyes:
Fammi sapere

;)
 
Intanto grazie della risposta...la cosa è per me importantissima ed ogni consiglio è confortante.
Ho cercato di adattare il tuo suggerimento, ma non mi funziona. Sicuramente sbaglio in qualcosa.
Senza star qui a postarti tutto il codice, puoi trovare il tutto direttamente al link http://www.radiomxt.com/prove/marted.htm
Se ti va di dare un'occhiata........
 
Elimina la riga <body onload="coloraT();"> ... all'interno dello script javascript non ha nessun senso!

Mentre onload="coloraT()" lo devi inserire nel tag body della pagina html

Fammi sapere se ora funziona
 
Allora prova a togliere fuori dalla funzione coloraT() il codice JavaScript e di inserirlo globalmente tra i tag script. Quindi elimina l'opzione onload dal tag body...
Per il codice fai riferimento alla mia prima risposta che ti ho postato
 
:confused: :eek:

Scusami, ma come avrai capito non sono molto esperto!
Allora, seguendo i tuoi consigli, al momento attuale ho il seguente codice:
Codice: 
<html>

<head>
<meta http-equiv="Content-Language" content="it">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>08</title>


<script type="text/javascript">
onload="coloraT()"
var cella1 = document.getElementById('cella1');
var cella2 = document.getElementById('cella2');
var cella3 = document.getElementById('cella3');
var cella4 = document.getElementById('cella4');

  var now = new Date();
        var hours = now.getHours();
	var psj=0;
//18-19 night
        if (hours > 17 && hours < 20){
		cella4.style.backgroundColor = "Red";
	}

	//20-21 night
        if (hours > 19 && hours < 22){
		cella1.style.backgroundColor = "Red";
	}

	//22-4 night
        if (hours > 21 || hours < 5){
		cella1.style.backgroundColor = "Red";
	}

	//9-17 day
        if (hours > 8 && hours < 18){
		cella1.style.backgroundColor = "Red";
	}

	//7-8 day
        if (hours > 6 && hours < 9){
		cella2.style.backgroundColor = "Red";
	}

	//5-6 day
        if (hours > 4 && hours < 7){
		cella3.style.backgroundColor = "Red";
	}
//-->

</script>

</head>

<body>

<table border="0" width="56%" id="table1">
	<tr>
		<td>
		<table border="0" width="185%" id="table2">
			<tr>
				<td>
				<div align="center">
				<table border="0" width="98%" marginwidth="0" marginheight="0" hspace="0" vspace="0" id="table3">
					<tr>
						<td>
						<table border="0" width="100%" id="table4">
							<tr>
								<td>
								<table border="0" width="103%" id="table5">
									<tr>
										<td>
										<table border="0" id="table7" height="322" width="531">
											<tr>
											
												<td id="cella1" width="44" align="center">
												<font color="#FFFFFF"><b>ON AIR</b></font></td>
												<td align="center" width="96">
												<b>08.00-09.00</b></td>
												<td width="126">Tu per tu</td>
												<td align="center"><b><i>MARTEDì</i></b></td>
											</tr>
											<tr>
												<td id="cella2" width="44" align="center">
												<font color="#FFFFFF"><b>ON AIR</b></font></td>
												<td align="center" width="96">
												<b>09.00-10.00</b></td>
												<td width="126">The girl</td>
												<td align="center"><b><i>MARTEDì</i></b></td>
											</tr>
											<tr>
											
												<td id="cella3" width="44" align="center">
												<font color="#FFFFFF"><b>ON AIR</b></font></td>
												<td align="center" width="96">
												<b>10.00-11.00</b></td>
												<td width="126">FantaWeb</td>
												<td align="center"><b><i>MARTEDì</i></b></td>
											</tr>
											<tr>
											
												<td id="cella3" width="44" align="center">
												<font color="#FFFFFF"><b>ON AIR</b></font></td>
												<td align="center" width="96">
												<b>11.00-12.00</b></td>
												<td width="126">Ho 20 di galera</td>
												<td align="center"><b><i>MARTEDì</i></b></td>
											</tr>
											<tr>
												<td width="44" align="center">
												<font color="#FFFFFF"><b>ON AIR</b></font></td>
												<td align="center" width="96">
												<b>12.00-13.00</b></td>
												<td width="126">Spacca La 
												notizia</td>
												<td align="center"><b><i>MARTEDì</i></b></td>
											</tr>
											<tr>
												<td width="44" align="center">
												<font color="#FFFFFF"><b>ON AIR</b></font></td>
												<td align="center" width="96">
												<b>13.00-14.00</b></td>
												<td width="126">Le Voci delle 
												Parole</td>
												<td align="center"><b><i>MARTEDì</i></b></td>
											</tr>
											<tr>
												<td width="44" align="center">
												<font color="#FFFFFF"><b>ON AIR</b></font></td>
												<td align="center" width="96">
												<b>14.00-15.00</b></td>
												<td width="126">Io mammete e tu</td>
												<td align="center"><b><i>MARTEDì</i></b></td>
											</tr>
											<tr>
												<td width="44" align="center">
												<font color="#FFFFFF"><b>ON AIR</b></font></td>
												<td align="center" width="96">
												<b>15.00-16.00</b></td>
												<td width="126">Zippo Lippo e 
												pupù</td>
												<td align="center"><b><i>MARTEDì</i></b></td>
											</tr>
											<tr>
												<td width="44" align="center">
												<font color="#FFFFFF"><b>ON AIR</b></font></td>
												<td align="center" width="96">
												<b>16.00-17.00</b></td>
												<td width="126">Ti prendo a 
												Cartoni</td>
												<td align="center"><b><i>MARTEDì</i></b></td>
											</tr>
											<tr>
												<td width="44" align="center">
												<font color="#FFFFFF"><b>ON AIR</b></font></td>
												<td align="center" width="96">
												<b>17.00-18.00</b></td>
												<td width="126">Stra Fa Bercini</td>
												<td align="center"><b><i>MARTEDì</i></b></td>
											</tr>
											<tr>
												<td width="44" align="center">
												<font color="#FFFFFF"><b>ON AIR</b></font></td>
												<td align="center" width="96">
												<b>18.00-19.00</b></td>
												<td width="126">Sono al Centro</td>
												<td align="center"><b><i>MARTEDì</i></b></td>
											</tr>
											<tr>
												<td width="44" align="center">
												<font color="#FFFFFF"><b>ON AIR</b></font></td>
												<td align="center" width="96">
												<b>19.00-20.00</b></td>
												<td width="126">Ma ce la fai 
												Pino</td>
												<td align="center"><b><i>MARTEDì</i></b></td>
											</tr>
										</table>
										</td>
									</tr>
								</table>
								</td>
							</tr>
						</table>
						</td>
					</tr>
				</table>
				</div>
				</td>
			</tr>
		</table>
		</td>
	</tr>
</table>

</body>

</html>


che comunque non funge.......
Quindi dove sbaglio?
(grazie per la pazienza!!)
 
Elimina la prima riga nel codice JavaScript
onload="coloraT()"

Ah, ma tu prevedi un ricaricamento della pagina? Javascript opera lato client e quindi il codice JavaScript viene eseguito a seguito di un evento (click su di un bottone) o a seguito di un reload della pagina.
Hai già considerato questo aspetto? :rolleyes:
 
Allora, tra aiuti vari qui e là, la cosa si è risolta così:
per l'impostazione delle celle
Codice: 
<html><head><title>Palinsesto</title>
<meta http-equiv="Content-Language" content="it">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css">
#t1{
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	height: 50px;
	width: 600px;
}
#t2{
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	height: 55px;
	width: 600px;

etc etc etc

per il resto
Codice: 
 function time() {
        var now = new Date();
        var hours = now.getHours();
  		var min=now.getMinutes();
  		var sec=now.getSeconds();

		if (min<=9) { min="0"+min; }
		if (sec<=9) { sec="0"+sec; }


	//8-9 day
        if (hours >= 8 && hours < 9){
		document.getElementById('t1').className='on_air';
		document.getElementById('t13').style.display='none';
	}

	//9-10 day
        if (hours >= 9 && hours < 10){
		document.getElementById('t2').className='on_air';
		document.getElementById('t13').style.display='none';
	}


etc etc etc
lo vedi QUI
Ora rimangono due problemi:

  1. che tutti i giorni appaiono con la trasmissione on line mentre devo trovare il modo che avvenga solo per il giorno corrente
  2. che le trasmissioni durano mezz'ora ciascuna, quindi devo impostare gli intervalli tra le (es .) 8.30 e le 9, le 9 e le 9.30 etc......

Comunque ti ringrazio tantissimo per l'aiuto e l'interessamento....:mavieni:
 
Devi accedere o registrarti per poter rispondere.

Discussioni simili

Cosina
Cambio colore sfondo al click
Risposte
2
Visite
3K
Javascript
Cosina
Cosina
F
Cambio colore immagine
Risposte
2
Visite
2K
Photoshop
filomeni
filomeni
I
cambio colore in base alla scelta nel form select
Risposte
6
Visite
2K
PHP
iperboreo
I
C
Gestione cambio colore dei link con css
Risposte
1
Visite
2K
Javascript
cavaliere123
C
Wox
Cambio colore tabella dinamica
Risposte
7
Visite
2K
Classic ASP
lukeonweb
lukeonweb
R
Cambio Colore ASP
Risposte
3
Visite
2K
Classic ASP
PoLe
PoLe
M
tabelle:cambio del colore di sfondo al passaggio del mouse
Risposte
15
Visite
9K
HTML e CSS
piero
P
D
[COMPRO/CERCO] GUEST POST o scambio link per sito di Spiritualità ed Esoterismo.
Risposte
0
Visite
1K
Vendere e Acquistare pubblicita' online
Daniwebmaster
D
F
Aiuto! cambio immagine di sfondo al cambio pagina
Risposte
2
Visite
1K
HTML e CSS
Fabrizio5778
F
S
[CERCO] scambio di articoli con link
Risposte
0
Visite
4K
Offerte e Richieste di scambio links
Sofiabrtld
S
N
cambio icona meteo giorno/notte
Risposte
2
Visite
1K
PHP
NuvolaB
N
L
input (rilevare cambio dati)
Risposte
3
Visite
1K
PHP
luigi777
L
T
cambio versione PHP e... panico!!
Risposte
4
Visite
1K
PHP
mr.x
M
S
Scontorno, cambio sfondo, alone
Risposte
1
Visite
1K
Photoshop
macus_adi
macus_adi
A
Scambio like
Risposte
0
Visite
1K
Annunci servizi di Social Media Marketing
Apprendista08
A
G
Cambio server dubbio ns
Risposte
3
Visite
2K
Server Dedicati e VPS
Ocusfocus
Ocusfocus
V
Ricerca volontari questionario tesi - Ricambio
Risposte
0
Visite
1K
Offerte e Richieste di Lavoro e/o Collaborazione
ValeStudy
V
kikdirty
cerco scambio link con siti di strumenti seo
Risposte
0
Visite
1K
Offerte e Richieste di scambio links
kikdirty
kikdirty
N
Scambio link sito ZA40
Risposte
1
Visite
2K
Offerte e Richieste di scambio links
masterok909
masterok909
mferri
Collegamento con xampp non funziona più da cambio di operatore.
Risposte
2
Visite
2K
Web Server
Max 1
Max 1
Alto Basso