Nwlapcug.com


Come far rimbalzare una palla in JavaScript

Ci sono un paio di metodi che è possibile utilizzare per inserire una palla che rimbalza in una pagina Web. Un metodo richiede di avere accesso al software Adobe Flash. L'altro metodo, che utilizza JavaScript..--non richiede di acquistare alcun software speciale. Tuttavia, si dovrebbe avere una conoscenza generale di codifica HTML e una solida conoscenza di JavaScript per far rimbalzare una palla con il codice JavaScript.

Istruzioni

1

Accedere al server Web e fare clic su pagina HTML in cui si desidera inserire il codice JavaScript che creerà una palla che rimbalza.

2

Scorrere fino alla sezione < head > del documento HTML. Inserire il codice seguente all'interno di questa sezione della pagina:

< SCRIPT LANGUAGE = "JavaScript1.2" >

<!-iniziare

Function BrowserCheck() () {

var b = AppName;

Se (b = = "Netscape") this.b = "NS";

ElseIf (b = = "Microsoft Internet Explorer") this.b = "IE";

else this.b = b;

This.v = parseInt(navigator.appVersion);

questo. NS = (this.b = = "NS" & & this.v > = 4);

questo. NS4 = (this.b = = "NS" & & this.v = = 4);

questo. NS5 = (this.b = = "NS" & & this.v = = 5);

questo. IE = (this.b = = "IE" & & this.v > = 4);

questo. Ie4 = (navigator.userAgent.indexOf ("MSIE 4') > 0);

questo. IE5 = (navigator.userAgent.indexOf ("MSIE 5') > 0);

Se (questo. IE5 | | questo. NS5) questo. VER5 = true;

Se (questo. IE4 | | questo. NS4) questo. VER4 = true;

questo. OLD = (! questo. VER5 & &! questo. VER4)? true: false;

This.min = (this. NS|| questo. IE);

}

è = nuovo BrowserCheck();

Fine-->

< / script >

3

Scorri fino alla sezione < corpo > della tua pagina. Inserire questo codice tra < body > e < / body > Tag:

< centro >

Cliccare ovunque per avviare script

< div id = "staticBall" style = "Posizione: parente; visibilità: visibile" >

< img altezza = larghezza 30 = 30 alt = "Statico palla" >

< / div >

< / center >

< div id = "sfera" style = "visibilità: nascosto; Posizione: absolute; sinistra: 100; Top: 10; Altezza: 34; Larghezza: 34 ">

< img altezza = larghezza 30 = 30 alt = "Palla che rimbalza" >

< / div >

4

Se si desidera utilizzare un altro tipo di palla, sostituire "l'http://www.rewritables.net/ball.gif" con l'URL dell'immagine di un'altra palla. La palla in questo codice è blu. Mantenere il codice intatto se si desidera utilizzare la palla blu.

5

Inserire il codice riportato di seguito appena sotto il codice inserito nel passaggio 3:

< script language = "Javascript1.2" >

<!-iniziare

iter = 0;

setId = 0;

giù = true;

up = false;

bouncingBall = (è. VER5)? document.getElementById("ball").style

: (è. NS)? Document.layers["Ball"]

: document.all["ball"].style;

stillBall = (è. VER5)? document.getElementById("staticBall").style

: (è. NS)? Document.layers["staticBall"]: document.all["staticBall"].style;

Verricello = (è. NS)? window.innerHeight - 55: document.body.offsetHeight - 55;

Document.OnMouseUp = buttonUp;

Se (è. NS4)

document.captureEvents(Event.MOUSEUP);

Function buttonUp(e) () {

Se (((è. NS)? e.which: event.button)! = 1) restituisce true;

Se (setId! = 0) clearInterval(setId);

bouncingBall.visibility="visible";

stillBall.visibility="hidden";

bouncingBall.left = (è. NS)? e.pageX - 15: event.offsetX - 15;

bouncingBall.top = (è. NS)? e.pageY - 15: event.offsetY - 15;

iter = 0;

setId = setInterval("generateGravity()", 20);

Restituisce true;

}

Function generateGravity() () {

Se ((parseInt (bouncingBall.top) + iter < verricello) & & giù) {

bouncingBall.top = parseInt(bouncingBall.top) + iter;

iter + +;

ritorno;

}

else {

Se ((parseInt(bouncingBall.top)< winH) & & giù) {

bouncingBall.top = verricello + 5;

ritorno;

}

giù = false;

up = true;

Se (iter < 0 & & parseInt(bouncingBall.top) > verricello) {

clearInterval(setId);

bouncingBall.visibility = "hidden";

stillBall.visibility="visible";

setId = 0;

}

Se (parseInt(bouncingBall.top) > 0 & & fino & & iter > = 0) {

bouncingBall.top = parseInt(bouncingBall.top) - iter;

iter;

Se (iter %3 = = 0) iter...;

ritorno;

}

giù = true;

up = false;

}

}

Fine-->

< / script >

6

Pubblicare la pagina.