Ottobre 2014 – Pagina 2 – Programmare con Javascript

Animazione > Play/Stop

31 Luglio 202323 Ottobre 2014 di admin

Agisci sui comandi di play e stop

var PATH="https://www.valcon.it/javascript/wp-content/uploads/";

var EXT=".gif";

var immagine=document.getElementById("animazione");

var FRAME=10;

var frame=0;

var codice=0;

function cambia()

{

frame++;

if(frame == FRAME)

frame=0;

immagine.src=PATH+frame+EXT;

}

function play() { if(codice == 0)

codice=setInterval("cambia()", 500);

}

function stop() { clearInterval(codice);

codice=0;

}

window.onload=cambia();

</script>

Immagini da 0 a 9 > 3

31 Luglio 202323 Ottobre 2014 di admin

Ci sono 10 immagini disponibili (da 0 a 9) che possono essere sfogliate: clicca sui pulsanti per cambiare il frame.

var PATH="https://www.valcon.it/javascript/wp-content/uploads/"

var frame=0

cambia(0)

function cambia(delta)

{

frame += delta;

if(frame == -1) frame=9;

if(frame == 10) frame=0;

document.animazione.src=PATH+frame+".gif"

}

</script>

Immagini da 0 a 9 > 2

31 Luglio 202323 Ottobre 2014 di admin

Ci sono 10 immagini disponibili (da 0 a 9) che possono essere sfogliate: clicca sull’immagine per cambiare il frame

var PATH="https://www.valcon.it/javascript/wp-content/uploads/"

var frame=0

function cambia()

{

frame++;

if(frame==10) frame=0;

document.animazione.src=PATH+frame+".gif"

}

cambia()

</script>

Immagini da 0 a 9 > 1

13 Giugno 202023 Ottobre 2014 di admin

Ci sono 10 immagini disponibili che possono essere sfogliate. Scegli il frame da 0 a 9.

var PATH="https://www.valcon.it/javascript/wp-content/uploads/"

var frame=0

function cambia(f)

{

frame=f;

document.animazione.src=PATH+frame+".gif"

}

cambia(0)

</script>

Colori sicuri: 216

25 Maggio 202323 Ottobre 2014 di admin

I 216 colori che appariranno fedeli su qualsiasi dispositivo scegli il mix di colori fondamentali Red, Green e Blue vedi il risultato e il codice RGB corrispondente RGB Red Green Blue

var rgb6= Array("00", "33", "66", "99", "CC", "FF");

function cambia61()

{

for(var i=0; i < 6; i++)

{

if(document.colore61.radioR[i].checked) r=rgb6[i];

if(document.colore61.radioG[i].checked) g=rgb6[i];

if(document.colore61.radioB[i].checked) b=rgb6[i];

}

document.colore61.coloreR.style.background="#"+r+"0000";

document.colore61.coloreG.style.background="#00"+g+"00";

document.colore61.coloreB.style.background="#0000"+b;

colore="#"+r+g+b;

document.colore61.colore.style.background=colore;

document.colore61.txtColore.value=colore;

}

function popola(nome)

{

for(i=0; i < 6; i++)

document.writeln("<input type='radio' name=" + nome + " onclick='cambia61()' />" + rgb6[i] + " ");

}

</script>

<tr>

</tr>

<tr>

<td><script>popola("radioR");</script></td>

</tr>

<tr>

<td>Green</td>

<td><script>popola("radioG");</script></td>

</tr>

<tr>

<td><script>popola("radioB");</script></td>

</tr>

</table>

</form>

document.colore61.radioR[5].checked=true;

document.colore61.radioG[5].checked=true;

document.colore61.radioB[5].checked=true;

cambia61();

</script>

Gli otto colori che sicuramente appariranno fedeli su qualsiasi dispositivo scegli il mix di colori fondamentali Red, Green e Blue vedi il risultato e leggi il nome e il codice RGB RGB Red 00 FF Green 00 FF Blue 00 FF CODICE

var nomi2=Array("black", "blue", "lime", "aqua", "red", "fuchsia", "yellow", "white");

function cambia2()

{

var nome2=0;

var r, g, b, colore;

if(document.colore2.radioR[0].checked) { r="00"; }

else { r="FF"; nome2 +=4; }

if(document.colore2.radioG[0].checked) { g="00"; }

else { g="FF"; nome2 +=2; }

if(document.colore2.radioB[0].checked) { b="00"; }

else { b="FF"; nome2 +=1; }

document.colore2.coloreR.style.background="#"+r+"0000";

document.colore2.coloreG.style.background="#00"+g+"00";

document.colore2.coloreB.style.background="#0000"+b;

colore="#"+r+g+b;

document.colore2.colore.style.background=colore;

document.colore2.txtColore.value=colore;

document.colore2.nome.value=nomi2[nome2];

}

</script>

<tbody>

<tr>

</tr>

<tr>

<td><input name="radioR" type="radio" onclick="cambia2()" />00

</tr>

<tr>

<td>Green</td>

<td><input name="radioG" type="radio" onclick="cambia2()" />00

</tr>

<tr>

<td><input name="radioB" type="radio" onclick="cambia2()" />00

</tr>

</tbody>

</table>

</form>

document.colore2.radioR.checked=true;

document.colore2.radioG.checked=true;

document.colore2.radioB.checked=true;

cambia2();

</script>

Equazione di II grado

31 Luglio 202323 Ottobre 2014 di admin

Inserisci i 3 coefficienti dell’equazione di II grado e studia la soluzione x2 + x + = 0 …

function eq2grado(a, b, c)

{

var r="???";

if(a == 0) // di primo grado

{

r="Equazione di primo grado\n";

if(b != 0)

{ // una soluzione

x=-c/b;

r += "x = " + x;

}

else if(c != 0) // nessuna soluzione

{

r += "Impossibile";

}

else // infinite soluzioni

{

r += "Indeterminata";

}

else // di secondo grado

{

r="Equazione di secondo grado\n";

delta=b*b-4*a*c;

r += "Discriminante = " + delta + "\n";

if (delta > 0) // due soluzioni distinte

{

delta=Math.sqrt(delta);

x1=(-b-delta)/(2*a);

x2=(-b+delta)/(2*a);

r += "x1 = " + x1 + "\nx2 = " + x2;

}

else if(delta == 0) // due soluzioni coincidenti

{

x=-b/(2*a);

r += "x1 = x2 = " + x;

}

else // nessuna soluzione

{

r += "Non ammette soluzioni reali";

}

return r;

}

function calcola()

{

var x=parseFloat(document.form_eq2.fa.value);

var y=parseFloat(document.form_eq2.fb.value);

var z=parseFloat(document.form_eq2.fc.value);

if(isNaN(x) || isNaN(y) || isNaN(z))

document.form_eq2.messaggio.value="---> Inserisci i dati! <---";

else

document.form_eq2.messaggio.value=eq2grado(x, y, z);

}

</script>

</form>

Osserva Se non tutti i valori sono numerici risponde con un messaggio di errore Per a=0 discute l’equazione di I grado corrispondente. Consulta la versione senza interfaccia grafica.

Più e meno

31 Luglio 202323 Ottobre 2014 di admin

Prova le operazioni: la casella di testo è di sola lettura, readonly.

function cambia(delta)

{

var x=parseInt(document.piu_meno.numero.value)

x += delta

document.piu_meno.numero.value=x

}

</script>

</form>

Da secondi a orario

31 Luglio 202323 Ottobre 2014 di admin

Convertire un certo numero di secondi in ore, minuti e secondi.

<tr>

</tr>

<tr>

</tr>

</table>

percorso="https://www.valcon.it/javascript/wp-content/uploads/";

document.getElementById("punti_1").src=percorso+"punti.gif";

document.getElementById("punti_2").src=percorso+"punti.gif";

function conv_1()

{

tot_secondi=parseInt(document.getElementById("secondi1").value);

minuti =Math.floor(tot_secondi/60);

ore =Math.floor(minuti/60);

minuti =minuti%60;

secondi=tot_secondi%60;

document.getElementById("conversione1").value=ore+" ore, " + minuti + " minuti, " + secondi +" secondi."

}

function conv_2()

{

tot_secondi=parseInt(document.getElementById("secondi2").value);

minuti =Math.floor(tot_secondi/60);

ore =Math.floor(minuti/60);

minuti =minuti%60;

secondi=tot_secondi%60;

x=Math.floor(ore/10); document.getElementById("ore_2" ).src=percorso+x+".gif";

x=ore%10; document.getElementById("ore_1" ).src=percorso+x+".gif";

x=Math.floor(minuti/10); document.getElementById("minuti_2" ).src=percorso+x+".gif";

x=minuti%10; document.getElementById("minuti_1" ).src=percorso+x+".gif";

x=Math.floor(secondi/10); document.getElementById("secondi_2").src=percorso+x+".gif";

x=secondi%10; document.getElementById("secondi_1").src=percorso+x+".gif";

}

conv_1();

conv_2();

</script>

Orario, con immagini, dinamico

13 Maggio 202223 Ottobre 2014 di admin

Orario completo, con immagini e aggiornante.

var PATH="https://www.valcon.it/javascript/wp-content/uploads/"

var EXT =".gif";

document.p1.src=percorso+"punti"+EXT;

document.p2.src=percorso+"punti"+EXT;

function orario()

{

var data =new Date();

var ore =data.getHours();

var minuti =data.getMinutes();

var secondi=data.getSeconds();

x=ore%10; document.o1.src=PATH+x+EXT;

x=Math.floor(ore/10); document.o2.src=PATH+x+EXT;

x=minuti%10; document.m1.src=PATH+x+EXT;

x=Math.floor(minuti/10); document.m2.src=PATH+x+EXT;

x=secondi%10; document.s1.src=PATH+x+EXT;

x=Math.floor(secondi/10); document.s2.src=PATH+x+EXT;

}

setInterval("orario()", 500);

</script>