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 相关文章推荐
JS实现打开本地文件或文件夹
Mar 09 Javascript
javascript转换字符串为dom对象(字符串动态创建dom)
May 10 Javascript
DOM 中的事件处理介绍
Jan 18 Javascript
基于jQuery选择器的整理集合
Apr 26 Javascript
jQuery实现遮罩层登录对话框
Dec 29 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
Aug 03 Javascript
关于Vue实现组件信息的缓存问题
Aug 23 Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
Feb 26 Javascript
vue文件树组件使用详解
Mar 29 Javascript
深入浅出 Vue 系列 -- 数据劫持实现原理
Apr 23 Javascript
微信小程序实现带放大效果的轮播图
May 26 Javascript
JavaScript实现通讯录功能
Dec 27 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
discuz authcode 经典php加密解密函数解析
2020/07/12 PHP
解析php做推送服务端实现ios消息推送
2013/07/01 PHP
php while循环得到循环次数
2013/10/26 PHP
php中的静态变量的基本用法
2014/03/20 PHP
PHP实现扎金花游戏之大小比赛的方法
2015/03/10 PHP
PHP json_encode() 函数详解及中文乱码问题
2015/11/05 PHP
PHP迭代器接口Iterator用法分析
2017/12/28 PHP
PHP进阶学习之垃圾回收机制详解
2019/06/18 PHP
Laravel 错误提示本地化的实现
2019/10/22 PHP
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
2013/03/11 Javascript
商城常用滚动的焦点图效果代码简单实用
2013/03/28 Javascript
JavaScript返回网页中超链接数量的方法
2015/04/03 Javascript
JavaScript中使用Math.PI圆周率属性的方法
2015/06/14 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
2016/05/10 Javascript
Canvas + JavaScript 制作图片粒子效果
2017/02/08 Javascript
angularjs 页面自适应高度的方法
2018/01/17 Javascript
vant IndexBar实现的城市列表的示例代码
2019/11/20 Javascript
vant中的toast层级改变操作
2020/11/04 Javascript
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
Django框架中处理URLconf中特定的URL的方法
2015/07/20 Python
wxpython实现图书管理系统
2018/03/12 Python
python 实现数字字符串左侧补零的方法
2018/12/04 Python
在pytorch中查看可训练参数的例子
2019/08/18 Python
pytorch 归一化与反归一化实例
2019/12/31 Python
python名片管理系统开发
2020/06/18 Python
Algenist奥杰尼官网:微藻抗衰老护肤品牌
2017/07/15 全球购物
美国最大的半成品净菜电商:Blue Apron(蓝围裙)
2018/04/27 全球购物
科颜氏法国官网:Kiehl’s法国
2019/08/20 全球购物
建筑毕业生自我鉴定
2013/10/18 职场文书
《黄河颂》教学反思
2014/02/07 职场文书
劳动竞赛活动方案
2014/02/20 职场文书
大班开学家长寄语
2014/04/04 职场文书
关于感恩的素材句子(38句)
2019/11/11 职场文书
科普 | 业余无线电知识-波段篇
2022/02/18 无线电
Spring事务管理下synchronized锁失效问题的解决方法
2022/03/31 Java/Android