当前位置：首页 > JavaScript

js实现红包

2026-04-06 07:02:37JavaScript

实现红包功能的JavaScript方法

随机分配红包金额

使用随机算法分配红包金额，确保总金额不变且每个红包金额合理。

function divideRedPacket(totalAmount, count) {
  let result = [];
  let remainingAmount = totalAmount;
  let remainingCount = count;

  for (let i = 0; i < count - 1; i++) {
    let max = remainingAmount / remainingCount * 2;
    let randomAmount = Math.random() * max;
    randomAmount = Math.floor(randomAmount * 100) / 100;

    result.push(randomAmount);
    remainingAmount -= randomAmount;
    remainingCount--;
  }

  result.push(Math.floor(remainingAmount * 100) / 100);
  return result;
}

处理边界情况

确保最后一个红包金额不为零，所有金额相加等于总金额。

js实现红包

function validateRedPacket(amounts, totalAmount) {
  const sum = amounts.reduce((a, b) => a + b, 0);
  return Math.abs(sum - totalAmount) < 0.01 && 
         !amounts.some(amount => amount <= 0);
}

实现红包动画效果

使用CSS动画和DOM操作创建红包打开效果。

js实现红包

function createRedPacketElement(amount) {
  const packet = document.createElement('div');
  packet.className = 'red-packet';
  packet.innerHTML = `
    <div class="envelope">点击打开</div>
    <div class="money hidden">${amount.toFixed(2)}元</div>
  `;

  packet.addEventListener('click', function() {
    this.querySelector('.envelope').classList.add('hidden');
    this.querySelector('.money').classList.remove('hidden');
  });

  return packet;
}

完整示例CSS样式

为红包添加基本样式和动画效果。

.red-packet {
  width: 120px;
  height: 160px;
  background-color: #e74c3c;
  border-radius: 5px;
  position: relative;
  margin: 10px;
  display: inline-block;
  cursor: pointer;
}

.envelope, .money {
  position: absolute;
  width: 100%;
  text-align: center;
  color: #f1c40f;
  font-weight: bold;
  transition: all 0.3s ease;
}

.hidden {
  opacity: 0;
  transform: scale(0);
}

实际应用示例

将上述功能组合实现完整的红包分发场景。

function distributeRedPackets() {
  const total = 100; // 总金额
  const count = 10;  // 红包个数
  const amounts = divideRedPacket(total, count);

  if (!validateRedPacket(amounts, total)) {
    console.error('红包分配异常');
    return;
  }

  const container = document.getElementById('red-packets-container');
  amounts.forEach(amount => {
    container.appendChild(createRedPacketElement(amount));
  });
}