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

整体实现效果:

需要用的图片:

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-domconst 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 dataif (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.shareImglet shareSubtitle = resultData.shareSubtitlelet shareTitle = resultData.shareTitleconsole.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}// 判断是不是公司appif (getCookie('appType')) {// const {shareImg,shareSubtitle,shareTitle} = await getData()const res = await getData()const {id,shareImg,shareSubtitle,shareTitle} = resconsole.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'); // 输出: titlelet 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'); //urllet 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-imgshareDiv.appendChild(p);// 将div元素添加到DOM中的某个元素中popup.appendChild(shareDiv);}
// 移除遮罩层
const removePopup = () => {const popup = document.querySelector('.popup');if (popup) {popup.remove();}
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/652292.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

JVM基础知识汇总篇

JVM基础知识汇总篇

☆* o(≧▽≦)o *☆嗨~我是小奥&#x1f379; &#x1f4c4;&#x1f4c4;&#x1f4c4;个人博客&#xff1a;小奥的博客 &#x1f4c4;&#x1f4c4;&#x1f4c4;CSDN&#xff1a;个人CSDN &#x1f4d9;&#x1f4d9;&#x1f4d9;Github&#xff1a;传送门 &#x1f4c5;&a…
阅读更多...
翻译: GPT-4 with Vision 升级 Streamlit 应用程序的 7 种方式一

翻译: GPT-4 with Vision 升级 Streamlit 应用程序的 7 种方式一

随着 OpenAI 在多模态方面的最新进展&#xff0c;想象一下将这种能力与视觉理解相结合。 现在&#xff0c;您可以在 Streamlit 应用程序中使用 GPT-4 和 Vision&#xff0c;以&#xff1a; 从草图和静态图像构建 Streamlit 应用程序。帮助你优化应用的用户体验&#xff0c;包…
阅读更多...
《合成孔径雷达成像算法与实现》Figure5.18

《合成孔径雷达成像算法与实现》Figure5.18

clc clear close all距离向参数 R_eta_c 20e3; % 景中心斜距 Tr 25e-6; % 发射脉冲时宽 Kr 0.25e12; % 距离向调频率 Fr 7.5e6; % 距离向采样率 Nrg 256; % 距离线采样点数 Bw abs(Kr*Tr); …
阅读更多...
.NET绿色开源一键自动化下载、安装、激活Office的利器

.NET绿色开源一键自动化下载、安装、激活Office的利器

前言 今天分享一款.NET开源、绿色、安全、无毒的支持一键自动化下载、安装、激活Microsoft Office的利器&#xff1a;LKY_OfficeTools。 工具介绍 一键自动化下载、安装、激活 Microsoft Office 的利器。绿色、开源、安全、无毒。 目前包含的功能&#xff1a; 一键快速下载、…
阅读更多...
【机器学习300问】16、逻辑回归模型实现分类的原理？

【机器学习300问】16、逻辑回归模型实现分类的原理？

在上一篇文章中&#xff0c;我初步介绍了什么是逻辑回归模型&#xff0c;从它能解决什么问题开始介绍&#xff0c;并讲到了它长什么样子的。如果有需要的小伙伴可以回顾一下&#xff0c;链接我放在下面啦&#xff1a; 【机器学习300问】15、什么是…
阅读更多...
C#，计算几何，二维贝塞尔拟合曲线（Bézier Curve）参数点的计算代码

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

Pierre Bzier Bzier 算法用于曲线的拟合与插值。 插值是一个或一组函数计算的数值完全经过给定的点。 拟合是一个或一组函数计算的数值尽量路过给定的点。 这里给出 二维 Bzier 曲线拟合的参数点计算代码。 区别于另外一种读音接近的贝塞耳插值算法&#xff08;Bessels int…
阅读更多...
【CAD全套教程】第1阶段 CAD软件教程 002+003基础界面设置

【CAD全套教程】第1阶段 CAD软件教程 002+003基础界面设置

002基础界面设置 1.切换界面至AutoCAD经典界面 方式一&#xff1a;任务栏点击后直接选择 方式二&#xff1a;右下角点击齿轮图标&#xff08;切换工作空间&#xff09;后直接选择 界面图 2.AutoCAD常用命令 工具栏右键单击&#xff0c;选择AutoCAD 3.命令提示行 最下方&#xf…
阅读更多...
【Docker】实现JMeter分布式压测

【Docker】实现JMeter分布式压测

一个JMeter实例可能无法产生足够的负载来对你的应用程序进行压力测试。如本网站所示&#xff0c;一个JMeter实例将能够控制许多其他的远程JMeter实例&#xff0c;并对你的应用程序产生更大的负载。JMeter使用Java RMI[远程方法调用]来与分布式网络中的对象进行交互。JMeter主站…
阅读更多...
【前端web入门第二天】01 html语法实现列表与表格_合并单元格

【前端web入门第二天】01 html语法实现列表与表格_合并单元格

html语法实现列表与表格 文章目录: 1.列表 1.1 无序列表1.2 有序列表1.3 定义列表 2.表格 2.1 表格基本结构2.2 表格结构标签2.3 合并单元格 写在最前,第二天学习目标: 列表 表格 表单 元素为嵌套关系 1.列表 作用:布局内容排列整齐的区域。 列表分类:无序列表、有序列表…
阅读更多...
数字IC实践项目（8）—CNN加速器（ASIC_Flow；付费项目补充）

数字IC实践项目（8）—CNN加速器（ASIC_Flow；付费项目补充）

数字IC实践项目&#xff08;8&#xff09;—CNN加速器&#xff08;ASIC_Flow&#xff1b;付费项目补充&#xff09; 更新说明项目整体框图神经网络框图File tree 项目简介和学习目的软件环境要求 Area、QOR、Power&Timing报告Area & QORTiming & Power 总结 更新说…
阅读更多...
【C++】类与对象（一）

【C++】类与对象（一）

前言 类与对象&#xff08;一&#xff09; 文章目录 一、面向对象和面向过程的对比二、类的引入2.1 C中的结构体2.2 类2.3 类定义方法2.4 修饰限定符2.5 封装2.6 类的实例化2.7 类对象的大小 三、this指针3.1 this 指针的使用 一、面向对象和面向过程的对比 面向过程编程是将程…
阅读更多...
GoJS—交互式图表开发的神器（海量案例）

GoJS—交互式图表开发的神器（海量案例）

一、GoJS是什么&#xff1a; GoJS是一个用于创建交互式可视化图表和图形的JavaScript库。它提供了丰富的功能和工具&#xff0c;使开发人员能够轻松地构建各种类型的图表&#xff0c;包括流程图、组织结构图、网络拓扑图等。GoJS具有灵活的布局和样式设置&#xff0c;可以通过简…
阅读更多...
Python中Numba库装饰器

Python中Numba库装饰器

一、运行速度是Python天生的短板 1.1 编译型语言&#xff1a;C 对于编译型语言&#xff0c;开发完成以后需要将所有的源代码都转换成可执行程序&#xff0c;比如 Windows 下的.exe文件&#xff0c;可执行程序里面包含的就是机器码。只要我们拥有可执行程序&#xff0c;就可以随…
阅读更多...
基于STM32的智能手环设计与实现

基于STM32的智能手环设计与实现

需要原理图工程&#xff0c;源码&#xff0c;PCB工程的朋友收藏&#xff0c;这篇文章关注我&#xff0c;私我吧&#xff01;&#xff01;&#xff01; 基于STM32的智能手环设计与实现 摘要一、研究背景及意义二、实现功能三、系统方案设计系统方案设计框图3.1 单片机芯片选择3…
阅读更多...
[HGAME 2023 week1]easyenc

[HGAME 2023 week1]easyenc

查壳 IDA打开 字符串打开就发现了明显的标志 int __cdecl main(int argc, const char **argv, const char **envp) {__int64 v3; // rbx__int64 v4; // raxchar v5; // alchar *v6; // rcxint v8[10]; // [rsp20h] [rbp-19h]char v9; // [rsp48h] [rbpFh]__int128 v10[3]; //…
阅读更多...
【Java】SpringMVC参数接收（一）

【Java】SpringMVC参数接收（一）

1、接收单个参数 &#xff08;1&#xff09;直接接收参数 RequestMapping("/hello") RestController public class HelloSpring {RequestMapping("/t2")public String t2(String name){return "name" name;} } 当没有传入参数时&#xff0c;返…
阅读更多...
《汇编语言:基于linux环境》eatsyscall汇编程序

《汇编语言:基于linux环境》eatsyscall汇编程序

当阅读此书&#xff0c;作者编写了一个这样的程序&#xff0c;我也想试一下。照着书中的代码写了下&#xff0c;可以使用nasm正常编译&#xff0c;ld也可以正常链接&#xff0c;但是无法正常执行。总是报错。 ; nasm -f elf64 -g -F stabs eatsyscall.asm ; ld -o eatsysca…
阅读更多...
sqli-labs靶场第七关

sqli-labs靶场第七关

7、第七关 id1 --单引号报错,id1" --双引号不报错,可以判断是单引号闭合 id1) --也报错&#xff0c;尝试两个括号闭合&#xff0c;id1)) --不报错 接下来用脚本爆库 import stringimport requestsnumbers [1, 2, 3, 4, 5, 6, 7, 8, 9, 0] letters2 list(string.ascii_…
阅读更多...
【销售数据分析】客户画像分析之总体画像

【销售数据分析】客户画像分析之总体画像

前一段时间把财务分析的一些报表及分析场景讲得差不多了&#xff0c;接下来想和大家讲一下销售分析中的一些场景。今年看了许多企业的数据&#xff0c;发现大家2023年比疫情三年更难&#xff01;从财务的几张报表就会发现净利润亏损的居多&#xff0c;而亏损的主要原因基本上都…
阅读更多...
Easysearch：语义搜索、知识图和向量数据库概述

Easysearch：语义搜索、知识图和向量数据库概述

什么是语义搜索&#xff1f; 语义搜索是一种使用自然语言处理算法来理解单词和短语的含义和上下文以提供更准确的搜索结果的搜索技术。旨在更好地理解用户的意图和查询内容&#xff0c;而不仅仅是根据关键词匹配&#xff0c;还通过分析查询的语义和上下文来提供更准确和相关的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023