服务器之家:专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - js教程 - JavaScript实现雪花飘落效果实例

JavaScript实现雪花飘落效果实例

2021-12-21 17:56小虫虫~ js教程

这篇文章主要为大家详细介绍了JavaScript实现雪花飘落效果实例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了JavaScript实现雪花飘落效果的具体代码,供大家参考,具体内容如下

一、实现功能

(1)添加一个背景图片;
(2)用js语言实现雪花飘落效果;
(3)使用setInterval定时器每800毫秒创建一个雪花;
(4)把每一个雪花作为参数传进动态下落的方法中即可。

二、展示

1.代码展示

代码如下:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html lang="en">
 
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <style>
 body {
  background-color: #000;
  /*防止出现向下滚动条*/
  overflow: hidden;
 }
 </style>
</head>
 
<body>
 <img src="1.jpg" style="height: 800px; width:1500px;">
 <script>
 function snow() {
  // 1、定义一片雪花模板
  var flake = document.createElement('div');
  // 雪花字符 ❄❉❅❆✻✼❇❈❊✥✺
  flake.innerHTML = '❅';
  flake.style.cssText = 'position:absolute;color:#fff;';
 
  //获取页面的高度 相当于雪花下落结束时Y轴的位置
  var documentHieght = window.innerHeight;
  //获取页面的宽度,利用这个数来算出,雪花开始时left的值
  var documentWidth = window.innerWidth;
 
  //定义生成一片雪花的毫秒数
  var millisec =10;
  //2、设置第一个定时器,周期性定时器,每隔一段时间(millisec)生成一片雪花;
  setInterval(function() { //页面加载之后,定时器就开始工作
  //随机生成雪花下落 开始 时left的值,相当于开始时X轴的位置
  var startLeft = Math.random() * documentWidth;
 
  //随机生成雪花下落 结束 时left的值,相当于结束时X轴的位置
  var endLeft = Math.random() * documentWidth;
 
  //随机生成雪花大小
  var flakeSize = 3 + 20 * Math.random();
 
  //随机生成雪花下落持续时间
  var durationTime = 4000 + 7000 * Math.random();
 
  //随机生成雪花下落 开始 时的透明度
  var startOpacity = 0.7 + 0.3 * Math.random();
 
  //随机生成雪花下落 结束 时的透明度
  var endOpacity = 0.2 + 0.2 * Math.random();
 
  //克隆一个雪花模板
  var cloneFlake = flake.cloneNode(true);
 
  //第一次修改样式,定义克隆出来的雪花的样式
  cloneFlake.style.cssText += `
   left: ${startLeft}px;
   opacity: ${startOpacity};
   font-size:${flakeSize}px;
   top:-25px;
    transition:${durationTime}ms;`;
 
  //拼接到页面中
  document.body.appendChild(cloneFlake);
 
  //设置第二个定时器,一次性定时器,
  //当第一个定时器生成雪花,并在页面上渲染出来后,修改雪花的样式,让雪花动起来;
  setTimeout(function() {
   //第二次修改样式
   cloneFlake.style.cssText += `
    left: ${endLeft}px;
    top:${documentHieght}px;
    opacity:${endOpacity};`;
 
   //4、设置第三个定时器,当雪花落下后,删除雪花。
   setTimeout(function() {
   cloneFlake.remove();
   }, durationTime);
  }, 0);
 
  }, millisec);
 }
 snow();
 </script>
</body>
</html>

2.效果展示

代码如下(示例):

JavaScript实现雪花飘落效果实例

总结

学会了使用JS语言实现雪花飘落特效效果;运用了定时器控制雪花出现的速度;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。

原文链接:https://blog.csdn.net/weixin_45876462/article/details/111745705

延伸 · 阅读

精彩推荐
  • js教程JS实现鼠标移动拖尾

    JS实现鼠标移动拖尾

    这篇文章主要为大家详细介绍了JS实现鼠标移动拖尾效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    day09682021-12-21
  • js教程微信小程序自定义modal弹窗组件的方法详解

    微信小程序自定义modal弹窗组件的方法详解

    这篇文章主要给大家介绍了关于微信小程序自定义modal弹窗组件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学...

    遇见小美好11922021-12-15
  • js教程javascript的事件描述

    javascript的事件描述

    本文主要为大家介绍javascript事件的基础知识,有需要的朋友可以参考下...

    js教程网9352021-12-15
  • js教程基于javascript实现移动端轮播图效果

    基于javascript实现移动端轮播图效果

    这篇文章主要为大家详细介绍了基于javascript实现移动端轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    A.香辣鸡腿堡8962021-12-15
  • js教程微信小程序实现modal弹出框遮罩层组件(可带文本框)

    微信小程序实现modal弹出框遮罩层组件(可带文本框)

    这篇文章主要给大家介绍了关于微信小程序实现modal弹出框遮罩层组件(可带文本框)的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者...

    BadmintonCode3432021-12-15
  • js教程Jquery+javascript实现支付网页数字键盘

    Jquery+javascript实现支付网页数字键盘

    这篇文章主要为大家详细介绍了Jquery+javascript实现支付网页数字键盘,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一...

    юноша 25662021-12-15
  • js教程JS 的 六种打断点的方式,你用过几种?

    JS 的 六种打断点的方式,你用过几种?

    Debugger 是前端开发很重要的一个工具,它可以在我们关心的代码处断住,通过单步运行来理清逻辑。而 Debugger 用的好坏与断点打得好坏有直接的关系。...

    神光的编程秘籍7772021-12-16
  • js教程JavaScript实现通讯录功能

    JavaScript实现通讯录功能

    这篇文章主要为大家详细介绍了JavaScript实现通讯录功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    书写梦想的铅笔头5572021-12-20