JavaScript实现雪花飘落效果实例

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

一、实现功能

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

二、展示

1.代码展示

代码如下：

				?

									<!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>