<! 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> snow float and 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; overflow: 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 = "10"/> level <Input id = "wind_button" type = button value = "Snowflake float and float"/> </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. style. 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 (); Godown (a. id, a. id, 8 * Math. random ()); I ++; All ++; Var x = 100 * Math. random () * Math. random (); SetTimeout ('gogo () ', x ); }; Function removeElement (_ element) {// function for removing tags Var _ parentElement = _ element. parentNode; If (_ parentElement ){ _ ParentElement. removeChild (_ element ); }; }; Function godown (a, e, speed ){ If (speed <3) {speed = 3} Var a1 = document. getElementById (); 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 = "there are" + (all-other) + "Snowflake points in the area ." }; }; 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 + ")", 20 )} Else {clearTimeout (wind_time); wind = 0 ;}; }; Gogo (); </Script> </Body> </Html> |