总结红包雨项目的所有代码,包括添加图片,分享按钮,红包雨,用户是否有抽奖逻辑判断

整体实现效果:

需要用的图片:

html:

<body>
    <div id="app">
      <!-- <div class="share-box">
        <img src="./share_box.png" alt="share-button">
      </div> -->
      <!-- img图片 -->
      <div class="gif-container">
        <img src="./WechatIMG2417.gif" alt="GIF Image">
      </div>
      
      <!-- 开启红包雨按钮 显示隐藏 点击事件 -->
      <!-- <div id="open-rain" onclick="openRain()"> -->
        <!-- <a href=""></a> -->
      <!-- </div> -->
      <mat-baselayout class="JlFf4v">
        <mat-button class="RbDQpE" onclick="openDialog('活动说明')" text="" slot="content"></mat-button>
        <mat-button class="share-box" onclick="shareDialog()" text="" slot="content"></mat-button>
        <mat-loginbutton class="UBnBBN" 登录后显示文案="当前账号：XXX" activity-id="118" slot="content"></mat-loginbutton>
        <mat-timelefttext class="RET3jo" name="timeLeft" activity-id="118" slot="content"></mat-timelefttext>
        <mat-prizebutton class="yoSTq7" text="" 我的奖品弹窗名称="我的奖品" slot="content"></mat-prizebutton>
        <mat-button class="M93ywK" onclick="openLink('https://mall.com/mall/h5/list/list.html?type=733,816,615&sortType=goodsId&channel=1022&channelSource=2024newyear')" text="" slot="content"></mat-button>
        <mat-button class="CsJSn5" onclick="openLink('https://mall.com/mall/h5/list/list.html?type=733,816,615&sortType=goodsId&channel=1022&channelSource=2024newyear')" text="去订阅" slot="content">去订阅</mat-button>
        <!-- 开启红包雨按钮 显示隐藏 点击事件 -->
        <mat-drawbutton id="open-rain" class="open-rain" text="" slot="content" 中奖后的实物弹窗名称="实物礼品" 中奖后的虚拟弹窗名称="虚拟礼品" activity-id="118"></mat-drawbutton>
        <!-- onclick="openRain()"  -->
      </mat-baselayout>
      <mat-baselayout class="k64tR1">
        <mat-showmorebutton class="j7uNhD" text="" slot="content"></mat-showmorebutton>
      </mat-baselayout>
      <mat-baselayout name="showMoreLayout" hidden="true" class="duWOMF">
        <mat-button class="GzFMQX" onclick="backTop()" text="" slot="content"></mat-button>
      </mat-baselayout>
      <mat-dialog class="qj7tuB" show="false" name="活动说明">
        <mat-baselayout class="J07uPE" slot="content">
          <mat-infobox class="Bg98z1" activity-id="118" slot="content"></mat-infobox>
          <mat-closebutton class="jOEy5L" slot="content"></mat-closebutton>
        </mat-baselayout>
      </mat-dialog>
      <!-- <mat-dialog class="qxwun1" show="false" name="虚拟礼品">
        <mat-baselayout class="MjHCv6" slot="content">
          <mat-text class="cjbrBP" text="测试奖品" slot="content">测试奖品</mat-text>
          <mat-text class="YE3zWJ" name="coupon" slot="content"></mat-text>
          <mat-copycouponbutton class="tjcJTw" text="" slot="content"></mat-copycouponbutton>
          <mat-closebutton class="abREE8" slot="content"></mat-closebutton>
        </mat-baselayout>
      </mat-dialog>
      <mat-dialog class="X5enoj" show="false" name="实物礼品">
        <mat-baselayout class="WARZqp" slot="content">
          <mat-text class="BAlE8S" text="测试奖品九阳豆浆机" slot="content">测试奖品九阳豆浆机</mat-text>
          <mat-input class="k4CSGf" placeholder="请输入" name="name" slot="content"></mat-input>
          <mat-input class="XXv1un" placeholder="请输入" name="telephone" slot="content"></mat-input>
          <mat-input class="XV4gTn" placeholder="请输入" name="address" slot="content"></mat-input>
          <mat-submitbutton class="B6TDbm" text="" slot="content"></mat-submitbutton>
          <mat-closebutton class="NNwMvl" slot="content"></mat-closebutton>
        </mat-baselayout>
      </mat-dialog> -->
      <mat-dialog class="qxwun1" show="false" name="虚拟礼品">
        <mat-baselayout class="MjHCv6" slot="content">
          <mat-text class="cjbrBP" text="测试奖品" slot="content">测试奖品</mat-text>
          <mat-text class="YE3zWJ" name="coupon" slot="content"></mat-text>
          <mat-copycouponbutton class="tjcJTw" text="" slot="content"></mat-copycouponbutton>
          <mat-closebutton class="abREE8" slot="content"></mat-closebutton>
        </mat-baselayout>
      </mat-dialog>
      <mat-dialog class="X5enoj" show="false" name="实物礼品">
        <mat-baselayout class="WARZqp" slot="content">
          <mat-text class="BAlE8S" text="测试奖品九阳豆浆机" slot="content">测试奖品九阳豆浆机</mat-text>
          <mat-input class="k4CSGf" placeholder="请输入" name="name" slot="content"></mat-input>
          <mat-input class="XXv1un" placeholder="请输入" name="telephone" slot="content"></mat-input>
          <mat-input class="XV4gTn" placeholder="请输入" name="address" slot="content"></mat-input>
          <mat-submitbutton class="B6TDbm" text="" slot="content"></mat-submitbutton>
          <mat-closebutton class="NNwMvl" slot="content"></mat-closebutton>
        </mat-baselayout>
      </mat-dialog>
      <mat-dialog class="cupjua" show="false" name="我的奖品">
        <mat-baselayout class="OoOBNz" slot="content">
          <mat-prizebox class="QXaj0p" activity-id="118" slot="content"></mat-prizebox>
          <mat-closebutton class="M0PXAA" slot="content"></mat-closebutton>
        </mat-baselayout>
      </mat-dialog>
    </div>
  </body>

js:

// 测试代码
class InfoBox extends HTMLElement {
  constructor() {
    super()
    Object.defineProperty(this, 'InfoBoxTemplate', {
      enumerable: true,
      configurable: true,
      writable: true,
      value: void 0
    })
    this.InfoBoxTemplate = `
    <template>
      <style>
        .container {
          display:block;
          width: 100%;
          height: 100%;
          position: relative;
          overflow-y: scroll;
          word-break: break-all;
          text-decoration: inherit;
        }
        p {
          margin: 0;
          padding: 0;
        }
      </style>
    
      <div class="container"></div>
    </template>`
    //采用shadow-dom
    const componentNode = createElementFromHTML(this.InfoBoxTemplate)
    this.attachShadow({ mode: 'open' }).appendChild(componentNode.content)
  }
  static get observedAttributes() {
    return ['activity-id']
  }
  async attributeChangedCallback() {
    const activityId = this.getAttribute('activity-id')
    let data
    if (activityId) {
      data = await getActivityInfo(activityId)
      this.shadowRoot.querySelector('.container').innerHTML = data.activityRules;
      console.log(data,'data')
    }
  }
  getActivityId() {
    return this.getAttribute('activity-id');
  }
}
customElements.define('mat-infobox', InfoBox)

// 从外部获取activityId的值
const infoBox = document.querySelector('mat-infobox');
const activityId = infoBox.getActivityId();
console.log(activityId);

const getData = async () =>{
  console.log('触发了getData接口')
  let resultData = await getActivityInfo(activityId);
  console.log(resultData,'resultData')
  let id = resultData.id;
  let shareImg = resultData.shareImg
  let shareSubtitle = resultData.shareSubtitle
  let shareTitle = resultData.shareTitle
  console.log(id,shareImg,shareSubtitle,shareTitle,'-')
  return {id,shareImg,shareSubtitle,shareTitle}
}

// 红包雨代码 开始
// 添加遮罩层
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')
      // cai.showNativeShare(string)
      // cai.shareWebContent()
      // const imgUrl = "https://fd.com/group1/M00/00/15/rBtmH2WuErCAF831AABxPiPUuc0518.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:\/\/companies.com\/2022-10-24\/101955017.html\"}`
      // cai.showNativeShare(string)
      // cai.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.com\/market\/activity\/2024_CNYear\",\"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();
  }
}

总结红包雨项目的所有代码,包括添加图片,分享按钮,红包雨,用户是否有抽奖逻辑判断

相关文章

必应聊天在当前安全搜索设置下不可用

【Qt】跨平台UI布局，以Windows + Android安卓为例

移动Web——平面转换-多重转换

【Linux】第三十八站：信号处理

数据结构三：线性表之单链表(带头结点单向)的设计与实现

git配置用户名和邮箱

扭蛋机小程序开发：探索用户体验与商业价值的融合

遇到字符串拼接用它就对啦！什么你居然不知道Java中对象作为方法参数和基本数据类型作为参数的区别？有巨坑！

二刷代码随想录|Java版|回溯算法1|回溯基础理论+组合问题

redis报错:WRONGTYPE Operation against a key holding the wrong kind of value

前端工程化之上cdn

Vue3探索编辑部——关于Pinia(1)

（七）for循环控制

Linux：命名管道及其实现原理

C#，计算几何，二维贝塞尔拟合曲线（Bézier Curve）参数点的计算代码

市场复盘总结 20240123

前端实现转盘抽奖 - 使用 lucky-canvas 插件

鸿蒙入门学习的一些总结

国考省考行测：分析推理，形式逻辑，所有有的分析

2024三掌柜赠书活动第七期：一本书读懂AIGC：探索AI商业化新时代