Ricordo che questi sono metodi dell'oggetto window.
Vediamo...
metodo setInterval()
Problema: realizzare un DIV qualunque che si muove orizzontalmente.
Il problema mi porta altri problemi a catena...
E' un problema di conversione di numeri e stringhe: nel voler aumentare il valore di style.left del mio DIV uso questo codice:
<head>
<script>
function muovi()
{
document.getElementById("testo").style.left=document.getElementById("testo").style.left+100;
}
</script>
</head>
<body onClick="muovi()">
<div id="testo" style="position:absolute;left:120px;top:0px;width:100px;height:50px;background-color:yellow;color:green">Ciao, bello!</div>
</body>
che non dà i risultati sperati: il DIV resta immobile come un mulo testardo nonostante bestemmie, imprecazioni, blandizie e minacce!Che fare?
Ma la consultazione del web, in particolare di questo mi fa fare delle riflessioni...
Vediamo come si presenta il valore del left del mio DIV, con questo codice:
<head>
<script>
function muovi()
{
var sinistra=document.getElementById("testo").style.left;
alert(sinistra);
}
</script>
</head>
<body onClick="muovi()">
<div id="testo" style="position:absolute;left:120px;top:0px;width:100px;height:50px;background-color:yellow;color:green">Ciao, bello!</div>
</body>
Ecco: ottengo non un semplice numero, ma 120px, che è una stringa!
Dunque, per poter fare calcoli devo convertire la stringa in numero, con quella formula che ho letto su quella pagina web. Ci provo:
<head>
<script>
function muovi()
{
var sinistra=document.getElementById("testo").style.left;
var numSinistra = Number(sinistra.replace("px",""));
alert(numSinistra);
}
</script>
</head>
<body onClick="muovi()">
<div id="testo" style="position:absolute;left:120px;top:0px;width:100px;height:50px;background-color:yellow;color:green">Ciao, bello!</div>
</body>
Ecco, sì, adesso la casella di avviso mi dà uno scarno 120, che presumo sia numero e non più stringa, visto che ho usato la funzione Number(). La funzione replace(), invece, sostituisce alla sottostringa "px" una sottostringa vuota.
Vediamo cosa si può fare con questo numero...
<head>
<script>
function muovi()
{
var sinistra=document.getElementById("testo").style.left;
var numSinistra = Number(sinistra.replace("px",""));
document.getElementById("testo").style.left=numSinistra+300;
}
</script>
</head>
<body onClick="muovi()">
<div id="testo" style="position:absolute;left:120px;top:0px;width:100px;height:50px;background-color:yellow;color:green">Ciao, bello!</div>
</body>
Ecco! Così funziona.Il numero viene riconsiderato stringa, evidentemente, nell'ultima riga del codice. Non mi trovo molto bene con questo linguaggio completamente "stipizzato". Il rispettabile signor C inorridirebbe sdegnato!
Nessun commento:
Posta un commento