JavaScript如何实现动态网页飘落的雪花

2023-07-02 11:07:57 679人浏览八月长安

摘要

这篇文章主要介绍了javascript如何实现动态网页飘落的雪花的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇JavaScript如何实现动态网页飘落的雪花文章都会有所收获，下面我们一起来看看吧。设计思路：定义

这篇文章主要介绍了javascript如何实现动态网页飘落的雪花的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇JavaScript如何实现动态网页飘落的雪花文章都会有所收获，下面我们一起来看看吧。

设计思路：

定义一定数量的雪花层，每层包含一个雪花；

雪花水平方向左右摇摆则是Math.sin()方法，正弦函数；

雪花垂直方向则是采用自加方法每次增加一定距离；

雪花每个大小不一；

采用的方法如下：

Math.ceil()方法：返回大于等于其数字参数的最小整数，如Math.ceil(3.4)=4；

Math.random()方法：返回介于0和1之间的随机数（含0但不包括1）；

clientWidth属性：对象（元素）的宽度；

clientHeight属性：对象（元素）的高度；

setTimeout(“JavaScript语句”，time(单位:毫秒))：2个参数，设置一个超时计时器，在执行该方法时开始计时，经过time时间后执行JavaScript语句。

完整代码如下：

<html><head><meta charset="utf-8"><title>飘落的雪花</title></head><script language="javascript"><!--var snow_size=new Array();var snow_color=new Array();var num=50;//雪花数量var smallest=5;//雪花最小尺寸var largest=30;//雪花最大尺寸var dx=new Array();//雪花左右振动幅度大小var xp=new Array();//水平位置var yp=new Array();//垂直位置var am=new Array();var stx=new Array();//水平位移var sty=new Array();//垂直位移var doc_width;var doc_height;function makeSize(){//定义每个雪花尺寸    return smallest+Math.random()*largest;    }function makeColor1(){//定义白色雪花    for(i=0;i<num;++i){       snow_color[i]='#ffffff';      }    }function makeColor2(){//定义彩色雪花    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(){//初始化    doc_width=document.body.clientWidth;    doc_height=document.body.clientHeight;    makeColor1();  //白色雪花    //makeColor2();  //彩色雪花    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){//如果雪花到达底部            xp[i]=Math.random()*(doc_width-am[i]-20);            yp[i]=0;//垂直位置重置为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);//间隔10毫秒调用一次snow函数    }//--></script><body id="myBody" bGColor="#bbbbbb"></body><script language="javascript"><!--init();snow();//--></script></html>

JavaScript如何实现动态网页飘落的雪花