JavaScript實現動態網頁飄落的雪花

2022-06-21 18:02:12

本文範例為大家分享了JavaScript實現動態網頁飄落雪花的具體程式碼，供大家參考，具體內容如下

設計思路：

1.定義一定數量的雪花層，每層包含一個雪花；

2.雪花水平方向左右搖擺則是Math.sin()方法，正弦函數；

3.雪花垂直方向則是採用自加方法每次增加一定距離；

4.雪花每個大小不一；

採用的方法如下：

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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。

JavaScript實現動態網頁飄落的雪花

設計思路：

採用的方法如下：

熱門文章