Temporizzazioni
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… Leggi tutto »Temporizzazioni
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… Leggi tutto »Temporizzazioni
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 |
<img id="img_dado" /><br/><input type="button" value="Un dado" onclick="parti()" /> <script> 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> |
Visualizza l’orario e la data completa in italiano
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 |
<canvas id="canvas1" style="border: 1px solid;" width="300" height="100"></canvas> <script> 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="blue"; 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> |
Visualizza l’orario (ore, minuti e secondi) aggiornato
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 |
<canvas id="canvas1" style="border: 1px solid;" width="200" height="100"></canvas> <script> 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="blue"; 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> |
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,… Leggi tutto »Interpolator nodes
È possibile precaricare le immagini in un array e poi recuperarle con un indice.
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 |
<img alt="Animazione" id="animazione" /> <input type="button" value="PLAY" onClick="play()" /> <input type="button" value="STOP" onClick="stop()" /> <script> 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> |
Le 12 immagini, tratte da Processing.org, realizzano un’animazione se visualizzate una dopo l’altra. Agisci sui comandi di play e stop.
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 |
<div align="center"> <p><img alt="Animazione" id="animazione" /></p> <p><input type="button" value="PLAY" onClick="funPlay()" /> <input type="button" value="STOP" onClick="funStop()" /></p> </div> <script> 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> |
Passa con il mouse sull’immagine
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<img name="animazione" onmouseover="play()" onmouseout="stop()" /> <script> 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> |
Agisci sui comandi di play e stop
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 |
<img id="animazione" /> <input type="button" value="PLAY" onClick="play()"> <input type="button" value="STOP" onClick="stop()"> <script> 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 completo, con immagini e aggiornante.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<img name="o2" /><img name="o1" /><img name="p1" /><img name="m2" /><img name="m1" /><img name="p2" /><img name="s2" /><img name="s1" /> <script> 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> |