是用原生js创建红包雨效果

fury_123

于 2024-01-25 15:29:54 发布

阅读量1.2k

点赞数 33

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/kuang_nu/article/details/135844541

版权

需求:

创建红包雨

答案:

// 红包雨代码 开始
// 添加遮罩层
const addOverlay = () => {
  const overlay = document.createElement('div');
  overlay.className = 'overlay';
  overlay.style.position = 'fixed';
  overlay.style.top = '0';
  overlay.style.left = '0';
  overlay.style.width = '100%';
  overlay.style.height = '100%';
  overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
  overlay.style.zIndex = '20';
  document.body.appendChild(overlay);
}

// 移除遮罩层
const removeOverlay = () => {
  const overlay = document.querySelector('.overlay');
  if (overlay) {
    overlay.remove();
  }
}

// 开启红包雨
const openRain = () => {
  console.log('点击了openRain');
  const hongbaos = Array.from({ length: 20 }); // 创建具有指定长度的数组
  // const maxLeft = document.body.offsetWidth - 40;
  
  // 获取根元素的字体大小（以像素为单位）
  const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);

  // 获取 app 元素的像素宽度
  const appWidthPx = document.getElementById('app').offsetWidth;

  // 将像素宽度转换为 rem 值
  const appWidthRem = appWidthPx / rootFontSize;

  console.log(appWidthRem,'输出 app 元素的宽度（以 rem 为单位）'); // 输出 app 元素的宽度（以 rem 为单位）
  const maxLeft = appWidthRem > 0 ? appWidthRem - 3 : document.body.offsetWidth - 40;
  // 将 rem 转换为像素
  const maxLeftPx = maxLeft * rootFontSize;
  console.log(maxLeftPx,'maxLeftPx')
  console.log(maxLeft,'maxLeft')

  // 添加遮罩层
  addOverlay();

  // 创建容器元素
  const container = document.createElement('div');
  container.className = 'container';

  for (let i = 0; i < hongbaos.length; i++) {
    const img = document.createElement('img');
    img.src = './hongbao.png';
    img.className = 'img';
    img.style.left = `${Math.random() * maxLeftPx}px`;
    img.style.animationDuration = `${Math.random() * 2 + 2}s`;
    img.style.animationDelay = `${i * 0.5}s`; // 设置不同的延迟时间
    container.appendChild(img);
  }

  // 在项目body节点上挂载container红包雨
  document.body.appendChild(container);

  // 设置定时器，在四秒后移除红包雨和遮罩层
  setTimeout(() => {
    removeOverlay();
    container.remove();
  }, 4000);

添加了遮罩层,挂载到body,

因为我是用的元素单位是rem自适应,