溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了JavaScript如何實現動態網頁飄落的雪花的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇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>
關于“JavaScript如何實現動態網頁飄落的雪花”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“JavaScript如何實現動態網頁飄落的雪花”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
