JavaScript如何實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁飄落的雪花

發(fā)布時(shí)間：2022-06-22 09:45:05 來源：億速云閱讀：136 作者：iii 欄目：開發(fā)技術(shù)

這篇文章主要介紹了JavaScript如何實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁飄落的雪花的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇JavaScript如何實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁飄落的雪花文章都會(huì)有所收獲，下面我們一起來看看吧。

設(shè)計(jì)思路：

1.定義一定數(shù)量的雪花層，每層包含一個(gè)雪花；

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

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

4.雪花每個(gè)大小不一；

采用的方法如下：

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

Math.random()方法：返回介于0和1之間的隨機(jī)數(shù)（含0但不包括1）；

clientWidth屬性：對(duì)象（元素）的寬度；

clientHeight屬性：對(duì)象（元素）的高度；

setTimeout(“JavaScript語句”，time(單位:毫秒))：2個(gè)參數(shù)，設(shè)置一個(gè)超時(shí)計(jì)時(shí)器，在執(zhí)行該方法時(shí)開始計(jì)時(shí)，經(jīng)過time時(shí)間后執(zhí)行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;//雪花數(shù)量
var smallest=5;//雪花最小尺寸
var largest=30;//雪花最大尺寸
var dx=new Array();//雪花左右振動(dòng)幅度大小
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(){//定義每個(gè)雪花尺寸
    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){//如果雪花到達(dá)底部
            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毫秒調(diào)用一次snow函數(shù)
    }
//-->
</script>
<body id="myBody" bgcolor="#bbbbbb">
</body>
<script language="javascript">
<!--
init();
snow();
//-->
</script>
</html>

JavaScript如何實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁飄落的雪花

關(guān)于“JavaScript如何實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁飄落的雪花”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“JavaScript如何實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁飄落的雪花”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

JavaScript如何實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁飄落的雪花

設(shè)計(jì)思路：

采用的方法如下：

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽