JavaScript實現(xiàn)動態(tài)網(wǎng)頁飄落的雪花
更新時間：2022年06月21日 17:06:41 作者：Cairo960918
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)動態(tài)網(wǎng)頁飄落的雪花，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript實現(xiàn)動態(tài)網(wǎng)頁飄落雪花的具體代碼，供大家參考，具體內(nèi)容如下
設(shè)計思路：
1.定義一定數(shù)量的雪花層，每層包含一個雪花；
2.雪花水平方向左右搖擺則是Math.sin()方法，正弦函數(shù)；
3.雪花垂直方向則是采用自加方法每次增加一定距離；
4.雪花每個大小不一；
采用的方法如下：
Math.ceil()方法：返回大于等于其數(shù)字參數(shù)的最小整數(shù)，如Math.ceil(3.4)=4；
Math.random()方法：返回介于0和1之間的隨機數(shù)（含0但不包括1）；
clientWidth屬性：對象（元素）的寬度；
clientHeight屬性：對象（元素）的高度；
setTimeout(“JavaScript語句”，time(單位:毫秒))：2個參數(shù)，設(shè)置一個超時計時器，在執(zhí)行該方法時開始計時，經(jīng)過time時間后執(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();//雪花左右振動幅度大小
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){//如果雪花到達(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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實現(xiàn)飄落星星特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了javaScript中slice函數(shù)用法,較為詳細(xì)的分析了javascript中slice函數(shù)的功能、定義及使用方法,需要的朋友可以參考下2015-06-06
移動端翻頁插件dropload.js（支持Zepto和jQuery）
這篇文章主要為大家詳細(xì)介紹了移動端翻頁插件dropload.js，支持Zepto和jQuery，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-07
這篇文章主要介紹了js實現(xiàn)兼容IE、Firefox的圖片縮放代碼,涉及JavaScript操作圖片元素的相關(guān)技巧,需要的朋友可以參考下2015-12-12
Track Image Loading效果代碼分析...2007-08-08
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)左滑刪除效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
改變文件域的樣式實現(xiàn)思路同時兼容ie、firefox
正如標(biāo)題所言只是模擬了file文件域的外觀，其實起作用的還是文件域file，這樣就很方便，感興趣的朋友可以了解下2013-10-10
這篇文章主要介紹了js多功能分頁組件layPage的適用方法，layPage是一款多功能的js分頁組件，即適用于異步分頁，又可用于傳統(tǒng)的整頁刷新跳頁，功能多樣，想要了解的朋友可以參考下文進(jìn)行學(xué)習(xí)2016-05-05
這篇文章主要介紹了JavaScript實現(xiàn)在頁面間傳值的方法,涉及javascript傳值的技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
可能很多朋友認(rèn)為undefined是在js中未定義變量時才會提示的錯誤,其實不然undefined 是js中的一特殊的變量,我們也可以提前定義哦,下面這篇文章主要給大家介紹了關(guān)于js中undefined該怎么判斷的相關(guān)資料,需要的朋友可以參考下2023-04-04