编程 Javascript

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 实现下雪特效的示例代码

- Author -

崔笑颜

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery 源码分析笔记(3) Deferred机制

Jun 19 Javascript

Jquery使用Firefox FireBug插件调试Ajax步骤讲解

Dec 02 Javascript

javascript笛卡尔积算法实现方法

Apr 08 Javascript

JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题

Dec 07 Javascript

js仿QQ中对联系人向左滑动、滑出删除按钮的操作

Apr 07 Javascript

jQuery焦点图轮播插件KinSlideshow用法分析

Jun 08 Javascript

JavaScript的字符串方法汇总

Jul 31 Javascript

Angular.js实现多个checkbox只能选择一个的方法示例

Feb 24 Javascript

浅谈angularJS的$watch失效问题的解决方案

Aug 11 Javascript

微信小程序学习总结（三）条件、模板、文件引用实例分析

Jun 04 Javascript

微信小程序实现自定义底部导航

Nov 18 Javascript

Vue实现指令式动态追加小球动画组件的步骤

Dec 18 Vue.js

在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