js雪花飘落

于 2021-08-22 23:00:48 发布
阅读量105 收藏
点赞数
分类专栏： 笔记 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45726786/article/details/119859654
版权 
<html>
<head>
 <meta charset="UTF-8">
  <style>
        body {
            background-color: black;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <script>
        // 封装一个生成雪花的方法
        function Flake() {
            var img = document.createElement("img");
            // 拿到窗口的宽高
            var w = window.innerWidth;
            var h = window.innerHeight;
            // 雪花出现的位置是随机的，可视的范围内任何地方都可以出现
            var top = h * Math.random();
            var left = w * Math.random();
            // 赋值坐标
            img.style.position = "absolute";
            img.style.top = top + 'px';
            img.style.left = left + 'px';
            // 为img添加图片
            img.src = 'flake.png';
            // 随机雪花的大小 （也可以设置成固定的）
            // transform  
            img.style.transform = "scale(" + Math.random() / 2 + ")";
            // 添加
            document.body.appendChild(img);
            // 下落
            function down() {
                top += Math.random() * 5;
                left += Math.random() * 5
                // 判断到边，如果top或left大于窗口的大小，表示超出屏幕了，可以拽回来
                if (top > h) top = -100;
                if (left > w) left = -100;
                img.style.top = top + 'px';
                img.style.left = left + 'px';

            }
            // 为每一个对象准备一个定时器  用来下落
            setInterval(down, 20);
        }
        // Flake();  //这里每次只有一个雪花
        // 多生成雪花 用for循环 40个（可以随意定个数）
        for (var i = 0; i < 40; i++) {
            // 为了保证每个对象的完整性，每一次为一个雪花对象开辟一个内存
            new Flake();
        }
    </script>
</body>
</html>
@小白鼠
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS实现的雪花飘落特效示例
10-15
主要介绍了JS实现的雪花飘落特效,结合实例形式详细分析了JavaScript结合时间函数动态操作页面元素的相关实现技巧,需要的朋友可以参考下
javascript实现雪花飘落效果
10-14
这篇文章主要讲解了如何使用JavaScript实现雪花飘落的特效，适合前端开发者参考学习。在JavaScript中创建这样的动画效果，主要涉及到CSS、DOM操作以及JavaScript的基本动画原理。 首先，HTML部分设置了一个名为`...
使用js实现雪花飘落效果
10-26
以下是对使用js实现雪花飘落的效果进行了介绍。需要的朋友可以 过来参考下
jQuery+three.js雪花飘落动画效果
06-10
在本项目中，"jQuery+three.js雪花飘落动画效果"是一种结合了两种技术的创新应用，旨在为用户带来一种视觉上的3D立体空间体验。jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画制作以及Ajax...
JS实现炫酷雪花飘落效果
10-14
在本文中，我们将探讨如何使用JavaScript（JS）来实现一个炫酷的雪花飘落效果。这个效果可以为网页增添节日气氛或者创造出独特的视觉体验。下面我们将详细介绍实现这个效果的关键步骤和相关知识点。 首先，我们需要...
随机生成20个范围在1~~10的随机数,装到数组中,去掉重复的数字
qq_45726786的博客
08-01 2284
随机生成20个范围在1~~10的随机数,装到数组中,去掉重复的数字 var oldArr = []; for (var i = 0; i < 20; i++) { var num = Math.floor(Math.random() * 10 + 1); //随机数 oldArr.push(num); //向数组内推进 } console.log(oldArr); var newArr =
JavaScript 创建10行10列表格
qq_45726786的博客
08-05 2140
<style> table { border-collapse: collapse; margin: auto; } td { border: 2px solid red; width: 30px; height: 30px; } </style> <!-- 创建...
js for循环简单案例(关于1~100以内的)
qq_45726786的博客
07-24 1509
1.求1~100之间的整数和。 // sum变量 存储结果的变量 var sum = 0; for (var i = 1; i <= 100; i++) { // sum =sum +i; sum += i; } console.log(sum); //5050 2.求1~100之间所有数的平均值 //sum计算总的和average记录平均值 var sum=0; var average = 0; fo
设计一套随机生成四位密码的程序，范围0~~9,不能出现重复的情况
qq_45726786的博客
08-03 862
//设计一套随机生成四位密码的程序，范围0~~9,不能出现重复的情况 function num( ){ var arr= []; while(true){ var isflag=true; var num1 = Math.floor(Math.random()*10); for(var i = 0;i < arr.length; i++){ if(arr[i] == num1){ isflag = flase; } } if(isflag){ arr.push(
for循环小练习以及数组练习
qq_45726786的博客
07-24 609
要求输入班级人数，之后依次输入每个学生的成绩，最后打印出该班级总的成绩(sum以及平均成绩 var people = prompt('请输入班级人数:') * 1; var sum= 0; //numscore 记录成绩总和 // 循环i<=people 输入学生的成绩 for (var i = 1; i <= people; i++) { var score = prompt('请输入第' + i + '个学生的成绩：') * 1; su.
通过cmd运行 提示 “编码GBK 的不可映射字符” 解决方法
qq_45726786的博客
01-21 534
notepad++ 编写代码时的情况 编写一段代码 public static void main(String[] args){ short num3=30; long num4=30L; System.out.println(num3); System.out.println(num4); 通过命令符提示器运行显示 ：编码GBK的不可映射字符 解决方法 在命令符提示器中运行文件时（java文件名）时，加上参数 -encoding UTF-8 列如：javac
查找字符串中出现最多的字符
qq_45726786的博客
07-31 244
var str ="bbbbdasfjdsfjdljghaadhjalfhj"; function maxCountChar(str){ var char = ''; //obj来保存每个字符出现的次数，格式{a:3,b:1,c:5} var obj = {}; for(const key in str){ //teller接收遍历的每个字符 var letter = str.charAt(key); //判断obj有没有以这个字符作为属性 if(obj[letter]){ //有 obj
多行移动（随着键盘上下左右键移动）
qq_45726786的博客
08-22 171
<html> <head> <meta charset="UTF-8"> <style> #tb { border: solid 1px black; } .gird { width: 50px; height: 50px; border: black solid 1px; } </s
表格单行移动（跟随键盘左右键移动）
qq_45726786的博客
08-22 113
<style> #tb { border: solid 1px black; } .gird { width: 50px; height: 50px; border: black solid 1px; } </style> <table id="tb"> <tr> .
简单的倒计时
qq_45726786的博客
08-22 98
<html> <meta charset="UTF-8"> <head> <style> #box { width: 500px; height: 150px; margin: 50px auto; font-size: 30px; } </style> </head> <body>
数组的常用方法js
qq_45726786的博客
07-30 90
数组的常用方法 from()把一个类似于数组的变量转成一个真正的数组 var str = 'hello'; var arr1 =Array.from(str); console.log(arr1); //(5) ["h", "e", "l", "l", "o"] isArray()判断参数是否为数组，是 返回true，不是 返回false console.log(Array.isArray([1, 2])); //true console.log(Array.isArray(
类型转换java
qq_45726786的博客
01-22 88
运算中，不同类型的数据先转化为同一类型，然后再进行运算。 低------------------------------------------------>高 byte,shart,char,--->int-->long-->float-->double 类型转换分为：强数据类型转换 和 自动类型转换 强制类型转换 (高------->低转换) （转换类名）变量名 例如： int i=127; byte b=i; //错误 会提示赋值b=i 要进行强
字符串的常用方法
qq_45726786的博客
07-30 59
length字符串可以通过length属性读取字符串的长度 var nameStr ="havde"; console.log(nameStr.length); //5 startsWith()判断字符串是否以某个字符开头，返回一个布尔值 var nameStr ="havde"; console.log(nameStr.startsWith('h')); //true substr()截取，第一个参数表示从第几位字符开始截取，第二个值表示要截取的长度，如果没有第二个参数，则表示要截取.
vue实现雪花飘落特效
最新发布
09-16
下面是一个简单的示例，展示了如何使用 canvas 和 JavaScript 实现雪花飘落的动画效果： ```html <canvas id="canvas" width="600" height="400"></canvas> // 获取 canvas 元素 var canvas = document....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值