欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript实现雪花飘落效果

程序员文章站 2022-06-22 13:55:05
本文实例为大家分享了javascript实现雪花飘落效果的具体代码,供大家参考,具体内容如下一、实现功能(1)添加一个背景图片;(2)用js语言实现雪花飘落效果;(3)使用setinterval定时器...

本文实例为大家分享了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>

2.效果展示

代码如下(示例):

JavaScript实现雪花飘落效果

总结

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

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

相关标签: js 雪花飘落