Cambio colore cella in base all'orario

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
 

WorldWideWeb

Utente Attivo
6 Apr 2008
78
0
6
Calabria
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>

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

;)
 

Epcentro

Nuovo Utente
10 Apr 2008
6
0
0
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........
 

WorldWideWeb

Utente Attivo
6 Apr 2008
78
0
6
Calabria
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
 

WorldWideWeb

Utente Attivo
6 Apr 2008
78
0
6
Calabria
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
 

Epcentro

Nuovo Utente
10 Apr 2008
6
0
0
: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!!)
 

WorldWideWeb

Utente Attivo
6 Apr 2008
78
0
6
Calabria
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:
 

Epcentro

Nuovo Utente
10 Apr 2008
6
0
0
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:
 
Discussioni simili
Autore Titolo Forum Risposte Data
Cosina Cambio colore sfondo al click Javascript 2
F Cambio colore immagine Photoshop 2
I cambio colore in base alla scelta nel form select PHP 6
C Gestione cambio colore dei link con css Javascript 1
Wox Cambio colore tabella dinamica Classic ASP 7
R Cambio Colore ASP Classic ASP 3
M tabelle:cambio del colore di sfondo al passaggio del mouse HTML e CSS 15
F Aiuto! cambio immagine di sfondo al cambio pagina HTML e CSS 2
N cambio icona meteo giorno/notte PHP 2
L input (rilevare cambio dati) PHP 3
T cambio versione PHP e... panico!! PHP 4
S Scontorno, cambio sfondo, alone Photoshop 1
G Cambio server dubbio ns Server Dedicati e VPS 3
mferri Collegamento con xampp non funziona più da cambio di operatore. Web Server 2
A [PHP] ERRORE QUANDO CAMBIO SLUG NEL CMS e REWRITE PHP 6
bubino8 Cambio puntamento IP di un dominio Mac e Software 0
A Cambio password utente DB Database 0
M Non perdere l'indicizzazione con cambio di cms ecommerce SEO e Posizionamento 1
C [Javascript] cambio dinamico riferimento elemento html Javascript 2
A [PHP] Cambio immagini con orario PHP 1
W Problema con cambio colorazione codice su Dreamweaver CC 2017 Windows e Software 0
bubino8 [WordPress] Trasferimento Sito con cambio Dominio(url) WordPress 6
G [Javascript] Intercettare cambio applicazione Javascript 0
M [Java] Cambio valore variabile ignorata Java 1
A Modifiche a CSS recepite solo dopo cambio nome cartella HTML e CSS 2
F PHP cambio contenuto PHP 4
giannit [PHP] Cambio url su menu css PHP 15
D cambio il dominio per mettere keyword dentro? SEO e Posizionamento 8
R PROBLEMA INVIO EMAIL AL CAMBIO DI STATO ORDINE E-Commerce 1
F Aggiornare marker su mappa google con una funzione ajax richiamata al cambio di una select Ajax 2
O cambio destinazione pulsante indietro del browser. HTML e CSS 0
felino Trasferimento dominio per cambio fornitore hosting Domini 3
felino [Slider Revolution] Cambio slide con click del mouse WordPress 0
J Mostrare mese intero (come cambio il codice?!) Java 1
S Cambio di Hosting Hosting 1
B Cambio webserver accesso a siti esterni Apache 0
X Intercettare cambio valore radio jQuery 1
C inserimento o eliminazione record mysql senza cambio pagina Ajax 9
PianetaAndroid Cambio Nickname Supporto Mr.Webmaster 3
S problema cambio pasw dal server Web Server 1
K Cambio indirizzo dominio e reindirizzamento 301 Domini 1
L Sito con doppia lingua. Gestire il cambio PHP 4
N Cambio Dominio Domini 4
felino Widget e cambio dominio Domini 4
F passaggio valori + cambio type Javascript 1
F E' possibile far comparire una scritta in un div al cambio di un valore di un form text??? Javascript 2
P Cambio tema; non si vedono più le immagini WordPress 4
simonetta619 cambio nick Supporto Mr.Webmaster 6
D Musica con bottone che non si interrompe al cambio pagina. Javascript 1
D Cambio funzioni mouse in calendario Javascript Javascript 1

Discussioni simili