Temporizzazione – Programmare con Javascript

Temporizzazioni

18 Giugno 2020 di admin

L’oggetto windows permette di eseguire codice con intervalli di tempo specifici setInterval(funzione, millisecondi) Ripete per sempre: aspetta un certo numero di millisecondi ed esegue la funzione specificata funzione, il nome della funzione da eseguire millisecondi, quanto tempo aspettare setTimeout(funzione, millisecondi) Aspetta un certo numero di millisecondi e dopo esegue la funzione specificata Si può annullare … Leggi tutto

Lanciare un dado

31 Luglio 202317 Giugno 2020 di admin

const NOME1="https://www.valcon.it/javascript/wp-content/uploads/dice-";

const NOME3=".png";

img_dado=document.getElementById("img_dado");

codice=0;

gira =0;

function cambia()

{

if(gira <= 0)

{

clearInterval(codice);

codice=0;

}

else

{

dado=1+Math.floor(6*Math.random());

img_dado.src=NOME1+dado+NOME3;

gira--;

}

function parti()

{

if(codice == 0)

{

gira=3

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

}

parti();

</script>

Orario e data

31 Luglio 202321 Gennaio 2019 di admin

Visualizza l’orario e la data completa in italiano

canvas=document.getElementById("canvas1");

w=canvas.width;

h=canvas.height;

w2=w/2;

hOra=0.5*h;

hData=0.7*h

g2d=canvas.getContext("2d");

g2d.textAlign="center";

g2d.fillStyle="#993300";

setInterval("orario()",500);

var s_mesi =new Array("gennaio","febbraio","marzo","aprile","maggio","giugno","luglio","agosto","settembre","ottobre","novembre","dicembre");

var s_giorni=new Array("Domenica","Lunedì","Martedì","Mercoledì","Giovedì","Venerdì","Sabato");

function orario()

{

var data =new Date() ;

var ore =data.getHours() ; if(ore < 10) ore ="0"+ore ;

var minuti =data.getMinutes() ; if(minuti < 10) minuti ="0"+minuti ;

var secondi=data.getSeconds() ; if(secondi < 10) secondi="0"+secondi;

var da0a6 =data.getDay() ;

var giorno =data.getDate() ;

var mese =data.getMonth() ;

var anno =data.getFullYear();

var strOra =ore + ":" + minuti + ":" + secondi;

var strData=s_giorni[da0a6]+" "+giorno+" "+s_mesi[mese]+" "+anno;

g2d.clearRect(0,0,w,h) ;

g2d.font="24px Courier"; g2d.fillText(strOra ,w2,hOra);

g2d.font="16px Courier"; g2d.fillText(strData,w2,hData);

}

</script>

Orario digitale

31 Luglio 202321 Gennaio 2019 di admin

Visualizza l’orario (ore, minuti e secondi) aggiornato

canvas=document.getElementById("canvas1");

w=canvas.width;

h=canvas.height;

w2=w/2

hOra=0.6*h

g2d=canvas.getContext("2d");

g2d.textAlign="center";

g2d.fillStyle="#993300";

g2d.font="32px Courier";

setInterval("orario1()",500);

function orario1()

{

var data =new Date();

var ore =data.getHours() ; if(ore < 10) ore ="0"+ore ;

var minuti =data.getMinutes(); if(minuti < 10) minuti ="0"+minuti ;

var secondi=data.getSeconds(); if(secondi < 10) secondi="0"+secondi;

var strOra =ore + ":" + minuti + ":" + secondi;

g2d.clearRect(0,0,w,h);

g2d.fillText(strOra ,w2,hOra);

}

</script>

Interpolator nodes

18 Giugno 20201 Gennaio 2018 di admin

I nodi interpolatori possiedono una sequenza di valori, keyValue, da passare durante un’animazione. Se un interpolatore è interrogato in un istante diverso da quelli specificati, key, allora passa un valore interpolato in modo lineare.

...

{

eventIn SFFloat set_fraction

exposedField MFFloat key [...]

exposedField MF... keyValue [...]

eventOut ... value_changed

}

Con l’evento set_fraction l’interpolatore riceve il segnale di intervenire a un certo istante ed esso reagisce con l’evento value_changed segnalando … Leggi tutto

Animazione > Con Array

31 Luglio 202323 Ottobre 2014 di admin

È possibile precaricare le immagini in un array e poi recuperarle con un indice.

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

var EXT =".gif";

var FRAME=12;

var frame=0;

var codice=0;

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

var immagini=new Array(FRAME);

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

{

immagini[i]=new Image();

immagini[i].src=PATH+i+EXT;

}

function cambia()

{

frame++;

if(frame == FRAME)

frame=0;

immagine.src=immagini[frame].src;

}

function play()

{

if(codice == 0)

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

}

function stop()

{

clearInterval(codice);

codice=0;

}

window.onload=cambia();

</script>

Animazione > Play/Stop

31 Luglio 202323 Ottobre 2014 di admin

Le 12 immagini, tratte da Processing.org, realizzano un’animazione se visualizzate una dopo l’altra. Agisci sui comandi di play e stop.

</div>

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

var EXT =".gif";

var FRAME =12;

var frame =0;

var codice =0;

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

function cambia()

{

frame=frame+1;

if(frame == FRAME)

frame=0;

immagine.src=PATH+frame+EXT;

}

function funPlay()

{

if(codice == 0)

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

}

function funStop()

{

clearInterval(codice);

codice=0;

}

cambia();

</script>

Animazione > Roll over

31 Luglio 202323 Ottobre 2014 di admin

Passa con il mouse sull’immagine

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

var frame=0;

function cambia()

{

frame++;

if(frame == 10) frame=0;

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

}

function play() { id=setInterval("cambia()", 500) }

function stop() { clearInterval(id) }

cambia()

</script>

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>

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>