Design ideas: 1. Define a certain number of snowflake layers, each layer contains a snowflake;
2. The horizontal swing of snowflake is the method of Math.sin(), sine function;
3. The vertical direction of snowflake is to increase a certain distance each time by self adding method;
4. Snowflakes vary in size;
The methods adopted are as follows:
Math.ceil() method: returns the minimum integer greater than or equal to its numeric parameter, such as Math.ceil(3.4)=4;
Math.random() method: returns a random number between 0 and 1 (including 0 but excluding 1);
clientWidth attribute: the width of the object (element);
clientHeight attribute: the height of the object (element);
setTimeout("JavaScript statement", time (unit: ms)): 2 parameters, set a timeout timer, start timing when executing the method, and execute JavaScript statement after time.
The complete code is as follows:
<html>
<head>
<meta charset="utf-8">
<title>falling snow </title>
</head>
<script language="javascript">
<!--
var snow_size=new Array();
var snow_color=new Array();
var num=50;//snow amount
var smallest=5;//Snowflake minimum size
var largest=30;//Snowflake maximum size
var dx=new Array();//The vibration amplitude of snowflake
var xp=new Array();//Horizontal position
var yp=new Array();//Vertical position
var am=new Array();
var stx=new Array();//Horizontal displacement
var sty=new Array();//vertical displacement
var doc_width;
var doc_height;
function makeSize(){//Define each snowflake size
return smallest+Math.random()*largest;
}
function makeColor1(){//Define white snowflakes
for(i=0;i<num;++i){
snow_color[i]='#ffffff';
}
}
function makeColor2(){//Define color snowflakes
for(i=0;i<num;++i){
A=Math.ceil(Math.random()*255);
B=Math.ceil(Math.random()*255);
C=Math.ceil(Math.random()*255);
snow_color[i]='rgb('+A+','+B+','+C+')';
}
}
function init(){//Initialization
doc_width=document.body.clientWidth;
doc_height=document.body.clientHeight;
makeColor1(); //white snow
//makeColor2(); / / color snowflake
for(i=0;i<num;++i){
dx[i]=0;
xp[i]=Math.random()*(doc_width-40);
yp[i]=Math.random()*doc_height;
am[i]=Math.random()*20;
snow_size[i]=makeSize();
stx[i]=0.02+Math.random()/10;
sty[i]=0.7+Math.random();
document.write("<div id='snow_"+i+"' style='position:absolute;z-index:eval(30"+i+");visibility:visible;top:15px;left:15px;font-size:"+snow_size[i]+";color:"+snow_color[i]+"'>*</div>");
}
}
function snow(){
for(i=0;i<num;++i){
yp[i]+=sty[i];
if(yp[i]>doc_height-50){//If snow reaches the bottom
xp[i]=Math.random()*(doc_width-am[i]-20);
yp[i]=0;//Vertical position reset to 0
stx[i]=0.02+Math.random()/10;
sty[i]=0.7+Math.random();
}
dx[i]+=stx[i];
document.getElementById("snow_"+i).style.top=yp[i];
document.getElementById("snow_"+i).style.left=xp[i]+am[i]*Math.sin(dx[i]);
}
setTimeout("snow()",10);//Call the snow function once every 10 milliseconds
}
//-->
</script>
<body id="myBody" bgcolor="#bbbbbb">
</body>
<script language="javascript">
<!--
init();
snow();
//-->
</script>
</html>After completion, browser browsing is shown as follows:
