This article illustrates the effect of JS to simulate the wind snow falling. Share to everyone for your reference. The implementation methods are as follows:
?
| 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 37 38-39 40 41 42 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | <! 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 "> <head> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title> snowflakes float </title> </head> <style> * {margin:0; padding:0; Vertical-align:top;} . Xue{position:absolute;color: #fff;} </style> <body> <div id= "BBB" style= "position:absolute;top:0px; right:0px;width:400px;border:1px #000 solid;background: #fff; z-index:9;height:30px; " > </div> <div id= "box" style= "height:600px;position:relative;border:1px red solid;background: #000; o Verflow:hidden; " > </div> <div style= "position:absolute;top:0px;right:400px;border:1px #000 solid;background: #fff; width : 400px;height:30px;z-index:5; " > <input id= "wind_id" value= "/>-grade Wind <input id=" Wind_button "Type=button value=" snowflakes fluttering and fluttering, "/> </div > <script> var box = document.geTelementbyid ("box"); var i= 0,c,d,wind_time; var all = 0,other = 0,wind=0; Box.style.width = ' 1000px '; document.getElementById ("Wind_button"). onclick = function () {cleartimeout (wind_time); wind = 0; wind = parseint ( document.getElementById ("wind_id"). Value); Wind_run (wind); Function Gogo () {var a = document.createelement ("div"); a.innerhtml = '. '; a.id = "Xue" + i; a.classname = "Xue"; a.styl E.top = parseint (box.style.height) * (Math.random () > 0.3? Math.random (): 0 + ' px '; if (wind!= 0) {var ss = Math.random () > Math.Abs (wind*0.025)? Math.random (): (Wind > 0? 0:1);} Else{var ss = Math.random ()} a.style.left = parseint (box.style.width) * ss + ' px '; Box.appendchild (a); Godown (A.id,a.id,8*math.random ()); i++; all++; var x = math.random () * Math.random (); SetTimeout (' Gogo () ', x); }; function Removeelement (_element) {//Remove label var _parentelement = _element.parentnode; if (_parentelement) {_ Parentelement.removechild (_element); }; }; function Godown (a,e,speed) {if speed; 3) {speed = 3} var a1 =document.getelementbyid (a); A1.style.top = parseint (a1.style.top) + speed + ' px '; if (parseint (A1.style.top) < parseint (box.style.height)) {e = settimeout ("Godown" "+a+" "," "+e+", "+speed+") ", 20)} else{cleartimeout (e); removeelement (A1); speed=null; other++; document.getElementById (' BBB '). InnerHTML = "The area also has" + ( All-other) + "a snowflake dot."}; }; function Wind_run (wind) {var a = document.getElementById ("box"). getElementsByTagName (' div '); for (var i = 0;i< a.length;i++) {a[i].style.left = parseint (a[i].style.left) + wind + ' px '; if (Math.Abs (wind) > 0.1) {wind_time = settimeout ("Wind_run" ("+wind+") ",)} else{cleartimeout (wind_time); wind = 0;}; }; Gogo (); </script> </body> </html> |
The
wants this article to help you with your JavaScript programming.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
