当前位置：首页 > JavaScript

js红包雨实现

2026-04-07 11:32:35JavaScript

实现思路

红包雨是一种常见的互动效果，通常在节日或活动中使用。通过JavaScript可以实现动态的红包下落效果，用户点击红包后可获得奖励。以下是实现红包雨的核心步骤。

创建红包元素

使用HTML和CSS创建红包的基本样式。红包可以是一个div元素，设置背景图片或颜色，并添加动画效果。

<div class="red-packet"></div>

.red-packet {
  width: 50px;
  height: 70px;
  background-image: url('red-packet.png');
  background-size: cover;
  position: absolute;
  cursor: pointer;
}

动态生成红包

通过JavaScript动态创建红包元素，并设置随机的位置、下落速度和旋转角度。

function createRedPacket() {
  const redPacket = document.createElement('div');
  redPacket.className = 'red-packet';

  // 随机水平位置
  const left = Math.random() * (window.innerWidth - 50);
  redPacket.style.left = `${left}px`;

  // 初始位置在屏幕外
  redPacket.style.top = '-70px';

  // 随机下落速度
  const speed = 2 + Math.random() * 3;

  // 随机旋转角度
  const rotation = Math.random() * 360;
  redPacket.style.transform = `rotate(${rotation}deg)`;

  document.body.appendChild(redPacket);

  // 下落动画
  animateRedPacket(redPacket, speed);
}

下落动画

使用requestAnimationFrame实现红包的下落动画，直到红包移出屏幕底部。

function animateRedPacket(redPacket, speed) {
  let top = -70;

  function fall() {
    top += speed;
    redPacket.style.top = `${top}px`;

    if (top < window.innerHeight) {
      requestAnimationFrame(fall);
    } else {
      redPacket.remove();
    }
  }

  requestAnimationFrame(fall);
}

点击事件处理

为红包添加点击事件，点击后移除红包并触发奖励逻辑。

function addClickEvent(redPacket) {
  redPacket.addEventListener('click', () => {
    redPacket.remove();
    // 触发奖励逻辑
    showReward();
  });
}

定时生成红包

使用setInterval定时调用createRedPacket，实现连续的红包雨效果。

function startRedPacketRain() {
  setInterval(createRedPacket, 300);
}

// 启动红包雨
startRedPacketRain();

优化性能

大量红包元素可能导致性能问题，可以通过以下方式优化：

使用transform代替top和left进行动画，利用硬件加速。
限制屏幕上同时存在的红包数量。
使用对象池管理红包元素，避免频繁创建和销毁。

// 对象池示例
const redPacketPool = [];

function getRedPacket() {
  if (redPacketPool.length > 0) {
    return redPacketPool.pop();
  }
  return document.createElement('div');
}

function releaseRedPacket(redPacket) {
  redPacketPool.push(redPacket);
}

完整示例代码

以下是一个完整的红包雨实现示例：

js红包雨实现

<!DOCTYPE html>
<html>
<head>
  <style>
    .red-packet {
      width: 50px;
      height: 70px;
      background-color: red;
      position: absolute;
      cursor: pointer;
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <script>
    function createRedPacket() {
      const redPacket = document.createElement('div');
      redPacket.className = 'red-packet';

      const left = Math.random() * (window.innerWidth - 50);
      redPacket.style.left = `${left}px`;
      redPacket.style.top = '-70px';

      const speed = 2 + Math.random() * 3;
      const rotation = Math.random() * 360;
      redPacket.style.transform = `rotate(${rotation}deg)`;

      document.body.appendChild(redPacket);

      redPacket.addEventListener('click', () => {
        redPacket.remove();
        alert('恭喜获得奖励！');
      });

      animateRedPacket(redPacket, speed);
    }

    function animateRedPacket(redPacket, speed) {
      let top = -70;

      function fall() {
        top += speed;
        redPacket.style.top = `${top}px`;

        if (top < window.innerHeight) {
          requestAnimationFrame(fall);
        } else {
          redPacket.remove();
        }
      }

      requestAnimationFrame(fall);
    }

    function startRedPacketRain() {
      setInterval(createRedPacket, 300);
    }

    startRedPacketRain();
  </script>
</body>
</html>

通过以上步骤，可以实现一个简单的红包雨效果。根据实际需求，可以进一步优化动画效果、添加音效或调整红包样式。