Este artigo descreve o método de JavaScript para alcançar o efeito de espalhar flocos de neve coloridos do céu. Compartilhe para sua referência. A análise específica é a seguinte:
Vamos dar uma olhada no efeito de execução primeiro, como mostrado na figura abaixo:
O código -fonte completo é o seguinte:
Copie o código da seguinte forma: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitória // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> javascript flocos de neve coloridos caem do céu </ititure>
<style type = "text/css">
.jb51snow {display: block; estouro: oculto; tamanho de fonte: 12px; posição: absoluto};
corpo {background:#000; margem: 0px}
html {Overflow: Hidden; Antecedentes:#000;}
a {cor: branco; decoração de texto: nenhum}
.jb51title {cor: vermelho; altura: 140px; largura: 800px; margem: 0px automático; text-align: Center}
</style>
</head>
<Body>
<script type = "text/javascript">
var yanhua = "yanhua.vevb.com";
var fogo = função (r, cor) {
this.radius = r || 12;
this.color = cor || "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 = {
Anexar: função (pai) {
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? "Block": "Nenhum";
}
}
VAR Fireworks = function () {
Var Fires = new Array ();
var count = 100;
var fl = 250;
var VPX = 500;
var vpy = 300;
var gravidade = 0,3;
Var piso = 200;
var de salto = -.8;
Var Timer;
retornar {
init: function () {
for (var i = 0; i <contagem; i ++) {
var color = 0xff0000;
color = (math.random () * 0xffffff) .ToString (16) .ToString (). Split (".") [0];
while (color.length <6) {
color = "0" + cor;
}
var fogo = novo incêndio (12, cor);
incêndios.push (fogo);
fogo.YYPOS = -100;
fogo.vx = math.random () * 6 - 3;
fogo.vy = math.random () * 6 - 3;
fogo.vz = math.random () * 6 - 3;
Fire.Append (document.body);
}
var que = this;
Timer = setInterval (function () {
for (var i = 0; i <contagem; i ++) {
that.move (incêndio [i]);
}
}, 30);
},
Move: function (fogo) {
fogo.vy += gravidade;
fogo.xpos += fogo.vx;
Fire.ypos += fogo.vy;
fogo.zpos += fogo.vz;
if (fogo.ypos> piso) {
fogo.YYPOS = piso;
fogo.vy *= salto;
}
if (fogo.zpos> -fl) {
var scale = fl / (fl + fogo.zpos);
Fire.SetSize (escala);
Fire.setPosition (VPX + Fire.xpos * escala,
vpy + fogo.ypos * escala);
Fire.setVisible (True);
} outro {
Fire.setVisible (falso);
}
}
}
}
if (yanhua === 'yanhua.jb' + '51. ' +' net ')
fogos de artifício (). init ();
função jb51snow () {
window.Location.Reload ();
} if (yanhua === 'yanhua.jb' + '51. ' +' net ')
setInterval (JB51Snow, 6000);
</script>
</body>
</html>
Espero que este artigo seja útil para a programação JavaScript de todos.