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 相关文章推荐
枚举JavaScript对象的函数
Dec 22 Javascript
JS函数验证总结(方便js客户端输入验证)
Oct 29 Javascript
js中的cookie的读写操作示例详解
Apr 17 Javascript
jquery实现的一个文章自定义分段显示功能
May 23 Javascript
jQuery常用操作方法及常用函数总结
Jun 19 Javascript
详解javascript高级定时器
Dec 31 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
May 17 Javascript
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
Vue组件开发技巧总结
Mar 04 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
Apr 14 Javascript
vue实现评论列表功能
Oct 25 Javascript
vue实现列表滚动的过渡动画
Jun 29 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
php 信息采集程序代码
2009/03/17 PHP
PHP合并数组+与array_merge的区别分析
2010/08/01 PHP
PHP Curl模拟登录微信公众平台、新浪微博实例代码
2016/01/28 PHP
PHP中Session ID的实现原理实例分析
2019/08/17 PHP
php + ajax 实现的写入数据库操作简单示例
2020/05/16 PHP
推荐11款jQuery开发的复选框和单选框美化插件
2011/08/02 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
2013/11/27 Javascript
jquery1.9 下检测浏览器类型和版本的方法
2013/12/26 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
2015/02/16 Javascript
JS显示下拉列表框内全部元素的方法
2015/03/31 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
2015/12/03 Javascript
详解Javascript继承的实现
2016/03/25 Javascript
原生js编写autoComplete插件
2016/04/13 Javascript
bootstrap IE8 兼容性处理
2017/03/22 Javascript
vue bootstrap小例子一枚
2017/06/09 Javascript
详解Element 指令clickoutside源码分析
2019/02/15 Javascript
原生javascript单例模式的应用实例分析
2020/02/23 Javascript
vue瀑布流组件实现上拉加载更多
2020/03/10 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
2020/10/02 Javascript
vue实现一个获取按键展示快捷键效果的Input组件
2021/01/13 Vue.js
[55:25]2018DOTA2亚洲邀请赛3月29日 小组赛A组 VG VS OG
2018/03/30 DOTA
python实现的udp协议Server和Client代码实例
2014/06/04 Python
Python将图片批量从png格式转换至WebP格式
2020/08/22 Python
pandas or sql计算前后两行数据间的增值方法
2018/04/20 Python
django 数据库连接模块解析及简单长连接改造方法
2019/08/29 Python
Keras - GPU ID 和显存占用设定步骤
2020/06/22 Python
python 基于selectors库实现文件上传与下载
2020/12/31 Python
特步官方商城:Xtep
2017/03/21 全球购物
Nike德国官网:Nike.com (DE)
2018/11/13 全球购物
英国领先的在线高尔夫商店:Scottsdale Golf
2019/08/26 全球购物
教导处工作制度
2014/01/18 职场文书
同事欢送会致辞
2015/07/31 职场文书
值班管理制度范本
2015/08/06 职场文书
岗位聘任协议书
2015/09/21 职场文书
什么是创业计划书?什么是商业计划书?这里一一解答
2019/07/12 职场文书
CSS 还能这样玩?奇思妙想渐变的艺术
2021/04/27 HTML / CSS