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防止表单重复提交的两种方法
Sep 30 Javascript
IE的事件传递-event.cancelBubble示例介绍
Jan 12 Javascript
js函数与php函数的区别实例浅析
Jan 12 Javascript
页面内容排序插件jSort使用方法
Oct 10 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
Aug 27 Javascript
浅谈JS中String()与 .toString()的区别
Oct 20 Javascript
AngularJS extend用法详解及实例代码
Nov 15 Javascript
AngularJS中的JSONP实例解析
Dec 01 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
Mar 13 Javascript
Vue表单类的父子组件数据传递示例
May 03 Javascript
javascript实现商品图片放大镜
Nov 28 Javascript
JS实现分页导航效果
Feb 19 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中静态类与静态变量用法的区别分析
2015/01/15 PHP
thinkPHP自动验证机制详解
2016/12/05 PHP
根据经纬度计算地球上两点之间的距离js实现代码
2013/03/05 Javascript
javascript中返回顶部按钮的实现
2015/05/05 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
jQueryUI中的datepicker使用方法详解
2016/05/25 Javascript
JSONP跨域请求实例详解
2016/07/04 Javascript
学习vue.js计算属性
2016/12/03 Javascript
jQuery实现弹窗居中效果类似alert()
2017/02/27 Javascript
Bootstrap表单制作代码
2017/03/17 Javascript
Javascript面试经典套路reduce函数查重
2017/03/23 Javascript
JS中Map和ForEach的区别
2018/02/05 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
2019/09/20 Javascript
浅谈使用nodejs搭建web服务器的过程
2020/07/20 NodeJs
vue中使用router全局守卫实现页面拦截的示例
2020/10/23 Javascript
Python操作sqlite3快速、安全插入数据(防注入)的实例
2014/04/26 Python
Python 的 with 语句详解
2014/06/13 Python
Python3中多线程编程的队列运作示例
2015/04/16 Python
以911新闻为例演示Python实现数据可视化的教程
2015/04/23 Python
Python 多线程抓取图片效率对比
2016/02/27 Python
对Python的交互模式和直接运行.py文件的区别详解
2019/06/29 Python
13个Pandas实用技巧,助你提高开发效率
2020/08/19 Python
使用CSS3创建动态菜单效果
2015/07/10 HTML / CSS
CSS实现聊天气泡效果
2020/04/26 HTML / CSS
挪威太阳镜和眼镜网上商城:SmartBuyGlasses挪威
2016/08/20 全球购物
凯伦·米莲女装网上商店:Karen Millen
2017/11/07 全球购物
Lululemon英国官网:加拿大瑜伽服装品牌
2019/01/14 全球购物
STP协议的主要用途是什么?为什么要用STP
2012/12/20 面试题
职工运动会邀请函
2014/01/19 职场文书
铲车司机岗位职责
2014/03/15 职场文书
《祁黄羊》教学反思
2014/04/22 职场文书
简洁的英文求职信范文
2014/05/03 职场文书
房屋租赁合同解除协议书
2014/10/11 职场文书
Python机器学习三大件之一numpy
2021/05/10 Python
python中urllib包的网络请求教程
2022/04/19 Python
Tomcat 与 maven 的安装与使用教程
2022/06/16 Servers