Este artículo describe el método de JavaScript para lograr el efecto de dispersar los coloridos copos de nieve del cielo. Compártelo para su referencia. El análisis específico es el siguiente:
Primero echemos un vistazo al efecto de ejecución, como se muestra en la figura a continuación:
El código fuente completo es el siguiente:
Copie el código de la siguiente manera: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1 transitional.dtd"> ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<title> JavaScript Coloridos copos de nieve caen del cielo </title>
<style type = "text/css">
.jb51snow {display: block; desbordamiento: oculto; tamaño de fuente: 12px; Posición: Absoluto};
cuerpo {fondo:#000; margen: 0px}
html {desbordamiento: oculto; Antecedentes:#000;}
A {color: blanco; decoración de texto: ninguno}
.jb51title {color: rojo; altura: 140px; ancho: 800px; margen: 0px auto; text-align: centro}
</style>
</ablo>
<Body>
<script type = "text/javaScript">
var yanhua = "yanhua.vevb.com";
var fire = function (r, color) {
this.radius = r || 12;
this.color = color || "FF6600";
this.xpos = 0;
this.ypos = 0;
this.zpos = 0;
this.vx = 0;
this.vy = 0;
this.vz = 0;
this.mass = 1;
this.p = document.createElement ("span");
this.p.classname = "jb"+"51snow";
this.p.innerhtml = "*";
this.p.style.fontSize = this.radius + "px";
this.p.style.color = "#" + this.color;
}
Fire.prototype = {
append: function (parent) {
parent.appendChild (this.p);
},
setSize: function (escala) {
this.p.style.fontSize = this.radius * escala + "px";
},
setPosition: function (x, y) {
this.p.style.left = x + "px";
this.p.style.top = y + "px";
},
setVisible: function (b) {
this.p.style.display = b? "Bloque": "Ninguno";
}
}
VAR fuegos artificiales = function () {
var freses = new Array ();
Var Count = 100;
var fl = 250;
var vpx = 500;
var vpy = 300;
Var Gravity = .3;
piso var = 200;
var bounce = -.8;
temporizador var;
devolver {
init: function () {
para (var i = 0; i <count; i ++) {
var color = 0xff0000;
color = (math.random () * 0xffffff) .ToString (16) .ToString (). Split (".") [0];
while (color.length <6) {
color = "0" + color;
}
var fire = new Fire (12, color);
incendios.push (fuego);
Fire.ypos = -100;
fire.vx = Math.random () * 6 - 3;
Fire.Vy = Math.random () * 6 - 3;
Fire.vz = Math.random () * 6 - 3;
Fire.append (document.body);
}
var que = esto;
timer = setInterval (function () {
para (var i = 0; i <count; i ++) {
eso.move (incendios [i]);
}
}, 30);
},
Move: function (fire) {
Fire.Vy += Gravity;
fire.xpos += fire.vx;
Fire.ypos += fire.vy;
Fire.zPos += fire.vz;
if (fire.ypos> piso) {
Fire.ypos = piso;
Fire.Vy *= Bounce;
}
if (fire.zpos> -fl) {
VAR SCALE = FL / (FL + FIRE.ZPOS);
Fire.setsize (escala);
Fire.setPosition (VPX + Fire.xpos * Escala,
VPY + Fire.ypos * escala);
Fire.setVisible (verdadero);
} demás {
Fire.setVisible (falso);
}
}
}
}
if (yanhua === 'yanhua.jb' + '51. ' +' net ')
fuegos artificiales (). init ();
función jb51snow () {
Window.location.Reload ();
} if (yanhua === 'yanhua.jb' + '51. ' +' net ')
setInterval (JB51SNOW, 6000);
</script>
</body>
</html>
Espero que este artículo sea útil para la programación de JavaScript de todos.