溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

利用JavaScript怎么編寫一個(gè)雪花飄落效果

發(fā)布時(shí)間：2020-12-28 14:11:38 來源：億速云 閱讀：138 作者：Leah 欄目：開發(fā)技術(shù)

利用JavaScript怎么編寫一個(gè)雪花飄落效果？針對這個(gè)問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。

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

（1）添加一個(gè)背景圖片；
（2）用js語言實(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" >
 <script>
 function snow() {
  // 1、定義一片雪花模板
  var flake = document.createElement('div');
  // 雪花字符 ???????????
  flake.innerHTML = '?';
  flake.style.cssText = 'position:absolute;color:#fff;';

  //獲取頁面的高度 相當(dāng)于雪花下落結(jié)束時(shí)Y軸的位置
  var documentHieght = window.innerHeight;
  //獲取頁面的寬度，利用這個(gè)數(shù)來算出，雪花開始時(shí)left的值
  var documentWidth = window.innerWidth;

  //定義生成一片雪花的毫秒數(shù)
  var millisec =10;
  //2、設(shè)置第一個(gè)定時(shí)器，周期性定時(shí)器，每隔一段時(shí)間（millisec）生成一片雪花；
  setInterval(function() { //頁面加載之后，定時(shí)器就開始工作
  //隨機(jī)生成雪花下落 開始 時(shí)left的值，相當(dāng)于開始時(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ī)生成雪花下落 開始 時(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);

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

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

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

關(guān)于利用JavaScript怎么編寫一個(gè)雪花飄落效果問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手