红包雨的代码实现最终的源代码的js

实现红包雨的效果的源码:

// 红包雨代码 开始
// 添加遮罩层
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: 26 }); // 创建具有指定长度的数组
  
  // 获取根元素的字体大小（以像素为单位）
  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.1}s`; // 设置不同的延迟时间
    container.appendChild(img);
  }

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

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




const closeRain = () => {
  console.log('关闭红包雨')
  removeOverlay();
  let container = document.getElementsByClassName('container')[0];
  container.remove();
}
// 红包雨代码 结束





// 分享按钮
const shareDialog = async () => {
  console.log('点击了分享按钮')

  if (isInGenerated()) {
    if (!checkLogin()) {
      login()
      return
    }
    // 判断是不是财新app
    if (getCookie('appType')) {
      // const {shareImg,shareSubtitle,shareTitle} = await getData()
      const res = await getData()
      const {id,shareImg,shareSubtitle,shareTitle} = res
      console.log(id,shareImg,shareSubtitle,shareTitle,'id,shareImg,shareSubtitle,shareTitle')
      
      // let shareImgString = encodeURIComponent(shareImg)
      // let string = `{\"id\":\"118\",\"title\":\"${shareTitle}\",\"articleTag\":\"#a6\",\"articleAbstract\":\"${shareSubtitle}\",\"share_type\":\"7\",\"url\":\"https:\/\/companies.com\/2022-10-24\/101955017.html\",\"picture_url\":\"${shareImgString}\"}`
      // // console.log(string,'string')
      // caixin.showNativeShare(string)
      // caixin.shareWebContent()
      // const imgUrl = "https://fd.com/group1/M00/00/15/xxx.jpg";
      // const modifiedUrl = imgUrl.replace(/\//g, "\\");

      // 输出修改后的URL
      // console.log(modifiedUrl);

      
      
      // let string = `{\"id\":\"118\",\"title\":\"${shareTitle}\",\"articleTag\":\"#a6\",\"articleAbstract\":\"${shareSubtitle}\",\"share_type\":\"7\",\"url\":\"https:\/\/companies.com\/2022-10-24\/101955017.html\"}`
      // // console.log(string,'string')
      // cai.showNativeShare(string)
      // cai.shareWebContent()


      // let title = JSON.stringify(shareTitle)
      // let newTitle = "\"" + title + "\"";
      // console.log(title,'title')
      // console.log(newTitle,'newTitle')
      // let string = `{\"id\":\"467064\",\"title\":${newTitle},\"articleTag\":\"#a6\",\"articleAbstract\":\"价格确实超出一般旅客的承受能力\",\"share_type\":\"1\",\"url\":\"https:\/\/xxx.xxx.com\/2022-10-24\/101955017.html\"}`
      // caixin.showNativeShare(string)
      // caixin.shareWebContent()
      console.log(id,'id')
      
      let title = JSON.stringify(shareTitle)
      console.log(title,'title')
      
      let newTitle = "\"" + title + "\"";
      console.log(newTitle,'newTitle')
      
      let lastTitle = title.replace(/"/g, '');
      console.log(lastTitle,'lastTitle'); // 输出: title




      let subtitle = JSON.stringify(shareSubtitle)
      console.log(subtitle,'subtitle');

      let lastSubtitle = subtitle.replace(/"/g, '');
      console.log(lastSubtitle,'lastSubtitle'); //摘要最后版本




      let img = JSON.stringify(shareImg)
      console.log(img,'img');
      let lastImg = img.replace(/"/g, '');
      console.log(lastImg,'lastImg'); //url
      
      let string = `{\"id\":\"${id}\",\"title\":\"${lastTitle}\",\"articleTag\":\"#a6\",\"articleAbstract\":\"${lastSubtitle}\",\"share_type\":\"7\",\"url\":\"https:\/\/huodong.cai.com\/market\/activity\/xxx\",\"pic_url\":\"${lastImg}\"}`
      console.log(string,'string')
      cai.showNativeShare(string)
      cai.shareWebContent()
    } else {
      // console.log(this.data,'this.data?')
      addPopup()
      setTimeout(() => {
        removePopup()
      }, 3000);
    }
  }
}

const addPopup = () => {
  console.log('触发了添加popup遮罩层')
  // 遮罩层添加
  const popup = document.createElement('div');
  popup.className = 'popup';
  popup.style.position = 'fixed';
  popup.style.top = '0';
  popup.style.left = '0';
  popup.style.width = '100%';
  popup.style.height = '100%';
  popup.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
  popup.style.zIndex = '20';
  document.body.appendChild(popup);
  // 遮罩层下面的img添加
  var shareDiv = document.createElement("div");
  // 设置div元素的class属性
  shareDiv.className = "share-img";

  // 创建一个img元素
  var img = document.createElement("img");

  // 设置img元素的src和alt属性
  img.src = "./pic_share-new.png";
  img.alt = "";

  // 将img元素添加到div元素中
  shareDiv.appendChild(img);

  // 创建文案p标签
  var p = document.createElement("p");

  // 给p标签添加文案
  p.textContent = '点击分享'

  // 将文案添加到DOM中的元素上面share-img
  shareDiv.appendChild(p);
  // 将div元素添加到DOM中的某个元素中
  popup.appendChild(shareDiv);

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

这是实现红包雨的源码.