快捷導(dǎo)航

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

更新時(shí)間：2020年12月27日 11:41:45 作者：小蟲(chóng)蟲(chóng)～

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

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

一、實(shí)現(xiàn)功能

（1）添加一個(gè)背景圖片；
（2）用js語(yǔ)言實(shí)現(xiàn)雪花飄落效果；
（3）使用setInterval定時(shí)器每800毫秒創(chuàng)建一個(gè)雪花；
（4）把每一個(gè)雪花作為參數(shù)傳進(jìn)動(dòng)態(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)向下滾動(dòng)條*/
  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è)面的高度 相當(dāng)于雪花下落結(jié)束時(shí)Y軸的位置
  var documentHieght = window.innerHeight;
  //獲取頁(yè)面的寬度，利用這個(gè)數(shù)來(lái)算出，雪花開(kāi)始時(shí)left的值
  var documentWidth = window.innerWidth;

  //定義生成一片雪花的毫秒數(shù)
  var millisec =10;
  //2、設(shè)置第一個(gè)定時(shí)器，周期性定時(shí)器，每隔一段時(shí)間（millisec）生成一片雪花；
  setInterval(function() { //頁(yè)面加載之后，定時(shí)器就開(kāi)始工作
  //隨機(jī)生成雪花下落 開(kāi)始 時(shí)left的值，相當(dāng)于開(kāi)始時(shí)X軸的位置
  var startLeft = Math.random() * documentWidth;

  //隨機(jī)生成雪花下落 結(jié)束 時(shí)left的值，相當(dāng)于結(jié)束時(shí)X軸的位置
  var endLeft = Math.random() * documentWidth;

  //隨機(jī)生成雪花大小
  var flakeSize = 3 + 20 * Math.random();

  //隨機(jī)生成雪花下落持續(xù)時(shí)間
  var durationTime = 4000 + 7000 * Math.random();

  //隨機(jī)生成雪花下落 開(kāi)始 時(shí)的透明度
  var startOpacity = 0.7 + 0.3 * Math.random();

  //隨機(jī)生成雪花下落 結(jié)束 時(shí)的透明度
  var endOpacity = 0.2 + 0.2 * Math.random();

  //克隆一個(gè)雪花模板
  var cloneFlake = flake.cloneNode(true);

  //第一次修改樣式，定義克隆出來(lái)的雪花的樣式
  cloneFlake.style.cssText += `
   left: ${startLeft}px;
   opacity: ${startOpacity};
   font-size:${flakeSize}px;
   top:-25px;
    transition:${durationTime}ms;`;

  //拼接到頁(yè)面中
  document.body.appendChild(cloneFlake);

  //設(shè)置第二個(gè)定時(shí)器，一次性定時(shí)器，
  //當(dāng)?shù)谝粋€(gè)定時(shí)器生成雪花，并在頁(yè)面上渲染出來(lái)后，修改雪花的樣式，讓雪花動(dòng)起來(lái)；
  setTimeout(function() {
   //第二次修改樣式
   cloneFlake.style.cssText += `
    left: ${endLeft}px;
    top:${documentHieght}px;
    opacity:${endOpacity};`;

   //4、設(shè)置第三個(gè)定時(shí)器，當(dāng)雪花落下后，刪除雪花。
   setTimeout(function() {
   cloneFlake.remove();
   }, durationTime);
  }, 0);

  }, millisec);
 }
 snow();
 </script>
</body>
</html>

2.效果展示

代碼如下（示例）：