Home > Developer > Web Develop
<! DOCTYPE html>
<meta charset= "UTF-8"/>
<title> Snowflake Drop </title>
<style>
. box{
height:600px;
width:800px;
border:1px solid red;
position:relative;
Overflow:hidden;
}
. Box div{
Position:absolute;
}
</style>
<body>
<div class= "box" id= "box" >
</div>
<input type= "button" value= "Generate Snowflake" id= "btn"/>
</body>
<script>
var Box=document.getelementbyid ("box");
var Btn=document.getelementbyid ("btn");
Generate Snowflakes
function Createsnow (l,t,s) {
var newnode=document.createelement ("div");
newnode.style.height=s+ "px";
newnode.style.width=s+ "px";
newnode.style.left=l+ "px";
newnode.style.top=t+ "px";
newnode.style.background= "url (' img/snow.png ')";
Newnode.style.backgroundsize= "100% 100%";
Box.appendchild (NewNode);
Startmove (NewNode);
}
var time1=null;
var poy=0;
Btn.onclick=function () {
SetInterval (function () {
var le=parseint (Math.random () *770);//random generation position and width height
var to=parseint (Math.random () *570);
var size=parseint (Math.random () *10+20);
Createsnow (le,to,size);
},100);
}
Snowflake whereabouts
function Startmove (obj) {
var poy=obj.offsettop;//gets the distance of the object to the top edge width
var time2=null;
function Move () {
poy++;
obj.style.top=poy+ "px";
if (poy>600) {//processing event when Snowflake exceeds container
Clearinterval (time2);//Clear Timer
Box.removechild (obj);//delete the node object that exceeds the container
}
}
Time2=setinterval (move,10);
}
</script>
Using JS to realize snowflake Fall function
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
