JS实现模拟风力的雪花飘落效果


Posted in Javascript onMay 13, 2015

本文实例讲述了JS实现模拟风力的雪花飘落效果。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>雪花飘啊飘</title>
</head>
<style>
* {margin:0; padding:0; vertical-align:top;}
.xue{position:absolute;color:#fff;}
</style>
<body>
<div id="bbb" 
style="position:absolute;top:0px;right:0px;width:400px;border:1px #000 solid;background:#fff;z-index:9;height:30px;">
</div>
<div id="box" 
style="height:600px;position:relative;border:1px red solid;background:#000;overflow:hidden;">
</div>
<div 
style="position:absolute;top:0px;right:400px;border:1px #000 solid;background:#fff;width:400px;height:30px;z-index:5;">
<input id="wind_id" value="10" />级风
<input id="wind_button" type=button value="雪花飘啊飘飘啊飘" />
</div>
<script>
var box = document.getElementById("box");
var i= 0,c,d,wind_time;
var all = 0,other = 0,wind=0;
box.style.width = '1000px';
document.getElementById("wind_button").onclick = function(){
clearTimeout(wind_time);wind = 0;
wind = parseInt(document.getElementById("wind_id").value);
wind_run(wind);
}
function gogo(){
var a = document.createElement("div");
a.innerHTML = '.';
a.id = "xue" + i;
a.className = "xue";
a.style.top = parseInt(box.style.height) * (Math.random() > 0.3 ? Math.random() : 0) + 'px';
if(wind != 0){var ss = Math.random() > Math.abs(wind*0.025) ? Math.random() : (wind > 0 ? 0 : 1) ;}else{var ss = Math.random()}
a.style.left = parseInt(box.style.width) * ss + 'px';
box.appendChild(a);
godown(a.id,a.id,8*Math.random());
i++;
all++;
var x = 100 * Math.random()* Math.random();
setTimeout('gogo()',x);
};
function removeElement(_element){//移除标签的函数
var _parentElement = _element.parentNode;
if(_parentElement){
_parentElement.removeChild(_element);
};
};
function godown(a,e,speed){
if(speed < 3){speed = 3}
var a1 =document.getElementById(a);
a1.style.top = parseInt(a1.style.top) + speed +'px';
if(parseInt(a1.style.top) < parseInt(box.style.height)){e = setTimeout("godown(\""+a+"\",\""+e+"\","+speed+")",20)}
else{
clearTimeout(e);
removeElement(a1);
speed=null;
other++;
document.getElementById('bbb').innerHTML = "区域内还有"+(all-other)+"个雪花点."
};
};
function wind_run(wind){
var a = document.getElementById("box").getElementsByTagName('div');
for(var i = 0;i<a.length;i++){
a[i].style.left = parseInt(a[i].style.left) + wind +'px';
};
if(Math.abs(wind) > 0.1){wind_time = setTimeout("wind_run("+wind+")",20)}
else{clearTimeout(wind_time);wind = 0;};
};
gogo();
</script>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
Cookie 注入是怎样产生的
Apr 08 Javascript
Document:getElementsByName()使用方法及示例
Oct 28 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
Dec 25 Javascript
页面装载js及性能分析方法介绍
Mar 21 Javascript
Node.js中创建和管理外部进程详解
Aug 16 Javascript
浅谈js中StringBuffer类的实现方法及使用
Sep 02 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
Vue.js学习笔记之常用模板语法详解
Jul 25 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
Jul 04 Javascript
关于微信小程序登录的那些事
Jan 08 Javascript
layer iframe 设置关闭按钮的方法
Sep 12 Javascript
原生JavaScript实现购物车
Jan 10 Javascript
JavaScript实现鼠标点击后层展开效果的方法
May 13 #Javascript
浅谈javascript中的闭包
May 13 #Javascript
jQuery构造函数init参数分析续
May 13 #Javascript
jQuery构造函数init参数分析
May 13 #Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
May 12 #Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
May 12 #Javascript
js实现带按钮的上下滚动效果
May 12 #Javascript
You might like
twig模板常用语句实例小结
2016/02/04 PHP
分享27个jQuery 表单插件集合推荐
2011/04/25 Javascript
js和php如何获取当前url的内容
2013/09/22 Javascript
详解jQuery插件开发中的extend方法
2013/11/19 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
2013/12/23 Javascript
JavaScript中实现继承的三种方式和实例
2015/01/29 Javascript
介绍一个简单的JavaScript类框架
2015/06/24 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
2016/11/29 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
2017/12/13 Javascript
vue在手机中通过本机IP地址访问webApp的方法
2018/08/15 Javascript
基于node简单实现RSA加解密的方法步骤
2019/03/21 Javascript
在element-ui的select下拉框加上滚动加载
2019/04/18 Javascript
开源一个微信小程序仪表盘组件过程解析
2019/07/30 Javascript
Vue+Vuex实现自动登录的知识点详解
2020/03/04 Javascript
浅谈js中的attributes和Attribute的用法与区别
2020/07/16 Javascript
浅要分析Python程序与C程序的结合使用
2015/04/07 Python
Python最基本的输入输出详解
2015/04/25 Python
整理Python 常用string函数(收藏)
2016/05/30 Python
python 剪切移动文件的实现代码
2018/08/02 Python
python文件拆分与重组实例
2018/12/10 Python
计算机二级python学习教程(2) python语言基本语法元素
2019/05/16 Python
django框架使用方法详解
2019/07/18 Python
python实现简单俄罗斯方块
2020/03/13 Python
numba提升python运行速度的实例方法
2021/01/25 Python
详解Python中的Lock和Rlock
2021/01/26 Python
美国最好的保健品打折网店:Swanson
2017/08/04 全球购物
美国著名手表网站:Timepiece
2017/11/15 全球购物
新闻专业本科生的自我评价分享
2013/11/20 职场文书
感恩母亲节活动方案
2014/03/04 职场文书
机械设计制造及其自动化专业求职信
2014/06/17 职场文书
2015年小学语文工作总结
2015/05/25 职场文书
工作年限证明模板
2015/06/15 职场文书
新入职员工工作总结
2015/10/15 职场文书
nginx结合openssl实现https的方法
2021/07/25 Servers
SQL Server删除表中的重复数据
2022/05/25 SQL Server
Python编写车票订购系统 Python实现快递收费系统
2022/08/14 Python