JavaScript实现动态网页飘落的雪花
更新时间：2022年06月21日 17:06:41 作者：Cairo960918
这篇文章主要为大家详细介绍了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
弹出层想必大家都有见过吧，本示例介绍的是一个定位至屏幕居中的弹出层，个人感觉效果还不错，感兴趣的朋友可以参考下2014-05-05
这篇文章主要介绍了js省市联动效果完整实例代码,涉及JavaScript数组的定义与遍历技巧,代码非常具有实用价值,需要的朋友可以参考下2015-12-12
这篇文章主要介绍了javascript获取select值的方法,实例分析了javascript获取select元素值的相关技巧,需要的朋友可以参考下2015-07-07
再一次项目上用到ie的userdata，考虑当用户不使用flash插件用于存储一些聊天记录2010-07-07
这篇文章主要为大家详细介绍了JS实现旋转木马轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
很多网站都有登录后才能复制的限制，什么原理呢？css属性user-select:none，通常会采用这种方式来禁止复制文本。但浏览开发者工具-审查元素，取消此样式后，就可以选中文本了。想要完整地禁止复制，还需要通过js控制选择的内容。2023-07-07
本篇文章主要是对js正则表达exec与match的区别进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
JS等比例缩小图片尺寸的实例，需要的朋友可以参考一下2013-02-02
之前在学习Bootstrap的过程中，遇到各种奇葩的坑，如果在学习bootstrap之前，准备工作先做好，就可以或多或少的避开一些坑。下面小编开始给大家介绍border-box这个属性的知识。感兴趣的朋友一起学习吧2016-05-05
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
one()方法功能是为所选的元素绑定一个仅触发一次的处理函数,感兴趣的朋友可以了解下它的调用语法为:one(type, [data], fn),阅读本文或许有意外的收获呢2013-02-02
最新评论