JavaScript 实现下雪特效的示例代码


Posted in Javascript onSeptember 09, 2020

直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>下雪效果实现</title>
  <link rel="stylesheet" type="text/css" href="reset.css">
  <style type="text/css">
    body,html{
      overflow: hidden;
    }
  </style>
</head>
<body>
  <script type="text/javascript">
    var snowflakes = {
      arr:[],// 数组盛放元素
      snowflake : [//雪花类型
            '❉',
            '❈',
            '*',
            '✲',
            '❀',
            '❃'
            ],
       snowflakeColor : [  //颜色库
            "red",
            "green",
            "#ccc123",
            "#345232",
            "#231111",
            "#ab2322"
            ],
       random : function (num){
        return Math.floor(Math.random()*num);// 获得一个num-1的整数
       },
       init : function (num){
        // 最多个数
        this.maxlength = num;
        // 边界
        this.maxWidth = (document.documentElement.clientWidth || document.body.clientWidth) + 20;
        // 边界
        this.maxHeight = (document.documentElement.clientHeight || document.body.clientHeight) + 20;
        this.create();
        this.move();
       },
       // 创建
       create : function (){
        var that = this;
        setInterval(function (){
          // 当数组中的数量,比最大数量要小的时候 开始创建
          if( that.arr.length < that.maxlength){
            var d = document.createElement("div");
            // 内容和 颜色是随机的 颜色和文字库里面的
            d.innerHTML = that.snowflake[that.random(that.snowflake.length)];
            d.style.color = that.snowflakeColor[that.random(that.snowflakeColor.length)];
            d.style.position = "absolute";
            // 位置是随机的 top(0- -99) left (0 - that.maxWidth*2/3-1)
            d.style.left = that.random(that.maxWidth*2/3) + "px";
            d.style.top = -that.random(100) + "px";
            // 速度
            d.vx = 2+that.random(10);
            d.vy = 3+that.random(10);
            // 数组添加元素, body 添加元素
            document.body.appendChild(d);
            that.arr.push(d)
          }
        },20)
       },
       // 运动
       move : function (){
        var that = this;
        var arr = that.arr;
        setInterval(function (){ 
          // 循环数组中的每一个元素
          for(var i = 0 ; i < arr.length ; i ++ ){
            // 替换位置
            arr[i].style.left = arr[i].offsetLeft + arr[i].vx + "px";
            arr[i].style.top = arr[i].offsetTop + arr[i].vy + 'px';
            // 判断边界 删除元素
            if (arr[i].offsetTop >= that.maxHeight || arr[i].offsetLeft >= that.maxWidth) {
              document.body.removeChild(arr[i]);
              arr.splice(i,1);
            }
          }
        },30)
       }
    }  
    window.onload = function (){
      snowflakes.init(100);
    }  
  </script>
</body>
</html>

效果图

JavaScript 实现下雪特效的示例代码

以上就是JavaScript 实现下雪特效的示例代码的详细内容,更多关于JavaScript 实现下雪特效的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
jQuery ctrl+Enter shift+Enter实现代码
Feb 07 Javascript
JS实现QQ图片一闪一闪的效果小例子
Jul 31 Javascript
JQuery中对Select的option项的添加、删除、取值
Aug 25 Javascript
js实现新浪微博首页效果
Oct 16 Javascript
详解webpack异步加载业务模块
Jun 23 Javascript
vue的全局提示框组件实例代码
Feb 26 Javascript
JavaScript常见JSON操作实例分析
Aug 08 Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 Javascript
基于JS实现web端录音与播放功能
Apr 17 Javascript
vue axios重复点击取消上一次请求封装的方法
Jun 19 Javascript
在Vue中创建可重用的 Transition的方法
Jun 02 Javascript
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
Jun 15 Javascript
在Vue中获取自定义属性方法:data-id的实例
Sep 09 #Javascript
vue+高德地图实现地图搜索及点击定位操作
Sep 09 #Javascript
vue实现几秒后跳转新页面代码
Sep 09 #Javascript
JS异步宏队列微队列原理详解
Sep 09 #Javascript
vue 项目软键盘回车触发搜索事件
Sep 09 #Javascript
基于原生JS封装的Modal对话框插件的示例代码
Sep 09 #Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
Sep 09 #Javascript
You might like
PHP 5.3.0 安装分析心得
2009/08/07 PHP
PHP中上传多个文件的表单设计例子
2014/11/19 PHP
php自动获取关键字的方法
2015/01/06 PHP
laravel 如何实现引入自己的函数或类库
2019/10/15 PHP
CSS心形加载的动画源码的实现
2021/03/09 HTML / CSS
javascript下操作css的float属性的特殊写法
2007/08/22 Javascript
JavaScript 事件冒泡简介及应用
2010/01/11 Javascript
用js实现计算加载页面所用的时间
2010/04/02 Javascript
js登录弹出层特效
2014/03/07 Javascript
javascript下拉列表菜单的实现方法
2015/11/18 Javascript
Javascript中关于Array.filter()的妙用详解
2016/12/04 Javascript
jQuery倒计时代码(超简单)
2017/02/27 Javascript
node.js中debug模块的简单介绍与使用
2017/04/25 Javascript
JS简单实现自定义右键菜单实例
2017/05/31 Javascript
vue 虚拟dom的patch源码分析
2018/03/01 Javascript
layui实现点击按钮给table添加一行
2018/08/10 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
2019/07/22 Javascript
vue基于v-charts封装双向条形图的实现代码
2019/12/09 Javascript
python编程实现归并排序
2017/04/14 Python
python添加模块搜索路径方法
2017/09/11 Python
Python多进程并发与多线程并发编程实例总结
2018/02/08 Python
Python元组及文件核心对象类型详解
2018/02/11 Python
Python使用爬虫抓取美女图片并保存到本地的方法【测试可用】
2018/08/30 Python
python+pyqt5实现24点小游戏
2019/01/24 Python
selenium处理元素定位点击无效问题
2019/06/12 Python
对Tensorflow中Device实例的生成和管理详解
2020/02/04 Python
python 图像插值 最近邻、双线性、双三次实例
2020/07/05 Python
Python无损压缩图片的示例代码
2020/08/06 Python
canvas裁剪clip()函数的具体使用
2018/03/01 HTML / CSS
Foot Locker意大利官网:全球领先的运动鞋和服装零售商
2017/05/30 全球购物
全球异乡人的跨境社交电商平台:Kouhigh口嗨网
2020/07/24 全球购物
运动会解说词50字
2014/01/18 职场文书
2015国庆节放假通知范文
2015/07/30 职场文书
优质护理心得体会
2016/01/22 职场文书
pytorch 如何使用amp进行混合精度训练
2021/05/24 Python
教你使用TensorFlow2识别验证码
2021/06/11 Python