JavaScript實現(xiàn)雪花飄落效果

更新時間：2020年12月27日 11:41:45 作者：小蟲蟲～

這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)雪花飄落效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript實現(xiàn)雪花飄落效果的具體代碼，供大家參考，具體內容如下

一、實現(xiàn)功能

（1）添加一個背景圖片；
（2）用js語言實現(xiàn)雪花飄落效果；
（3）使用setInterval定時器每800毫秒創(chuàng)建一個雪花；
（4）把每一個雪花作為參數(shù)傳進動態(tài)下落的方法中即可。

二、展示

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;
  /*防止出現(xiàn)向下滾動條*/
  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;
  //獲取頁面的寬度，利用這個數(shù)來算出，雪花開始時left的值
  var documentWidth = window.innerWidth;

  //定義生成一片雪花的毫秒數(shù)
  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();

  //隨機生成雪花下落持續(xù)時間
  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);

  //設置第二個定時器，一次性定時器，
  //當?shù)谝粋€定時器生成雪花，并在頁面上渲染出來后，修改雪花的樣式，讓雪花動起來；
  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.效果展示

代碼如下（示例）：