这次给大家带来js实现动态雪花飘落，js实现动态雪花飘落的注意事项有哪些，下面就是实战案例，一起来看一下。
<!doctype html>
<html>
<head>
<meta content="text/html" charset="utf-8">
<title>飘雪</title>
<style type="text/css">
*{
margin:0;
padding:0;
font-family:微软雅黑;
font-size:13px;
color:#ffffff;
}
body{
background:#00a0fc;
overflow:hidden;
}
</style>
</head>
<body>
</body>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
// 窗口大小
var opagex=window.screen.width;
var opagey=window.screen.height;
var asnow=[];
// 雪花模板
function snow(x,y,xspeed,yspeed,xsin,size){//x水平位置,y垂直位置,xspeed水平步距,yspeed垂直步距,xsin振幅,size雪花大小
this.node=document.createelement('p');
this.x=x;
this.y=y;
this.xspeed=xspeed;
this.yspeed=yspeed;
this.xsin=xsin;
this.size=size;
this.createsnow=function(){
this.node.style.position='absolute';
this.node.style.top=this.y+'px';
this.node.style.left=this.x+'px';
this.node.innerhtml='*';
document.body.appendchild(this.node);
};
this.createsnow();
this.snowmove=function(){
this.node.style.top=parseint(this.node.style.top)+this.yspeed+'px';//垂直方向运动
this.node.style.left=parseint(this.node.style.left)+this.xsin*math.sin(this.xspeed)+'px';
this.node.style.fontsize=this.size+'px';
// this.node.style.color='rgb('+math.ceil(math.random()*255)+','+math.ceil(math.random()*255)+','+math.ceil(math.random()*255)+')';
};
}
// 创建雪花
function createsnow(){
asnow.push(new snow(math.random()*opagex,-50,0.02+math.random()/10,1+math.random(),math.random()*30,20+math.random()*30));
}
setinterval(createsnow,1000);//一秒钟创建一个雪花
// 雪花移动函数
function snowmove(){
for(var j=0;j<asnow.length;j++){
asnow[j].snowmove();
if(parseint(asnow[j].node.style.top)>opagey || parseint(asnow[j].node.style.left)>opagex){
asnow[j].node.parentnode.removechild(asnow[j].node);
asnow.splice(j,1);
}
}
}
setinterval(snowmove,10);
</script>
</html>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
js+canvas绘制饼状统计图
react-native-fs插件使用案列详解
以上就是js实现动态雪花飘落的详细内容。