好玩的领取红包封面整蛊页面 | 附源码下载修改教程-小金同学

效果演示

和原版一样的效果，但是…..

图片[1]-好玩的领取红包封面整蛊页面 | 附源码下载修改教程-小金同学如果你点击领取并使用，就会陷入疯狂的弹窗中

源码下载

index.html

<html lang="en"><head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover">
    <title _msthash="61815" _msttexthash="746746"></title>
    <link rel="shortcut icon" href="https://www.iculture.cc/icon/logo.ico" type="image/x-icon">
    <link href="https://res.wx.qq.com/a/wx_fed/money-envelope-cover/res/css/chunk-common.69733efd.css" rel="stylesheet">
    <link href="https://res.wx.qq.com/a/wx_fed/money-envelope-cover/res/css/red_cover.ab6aa076.css" rel="stylesheet">
    <style id="__WXWORK_INNER_SCROLLBAR_CSS">::-webkit-scrollbar { width: 12px !important; height: 12px !important; }::-webkit-scrollbar-track:vertical {  }::-webkit-scrollbar-thumb:vertical { background-color: rgba(136, 141, 152, 0.5) !important; border-radius: 10px !important; background-clip: content-box !important; border:2px solid transparent !important; } ::-webkit-scrollbar-track:horizontal {  }::-webkit-scrollbar-thumb:horizontal { background-color: rgba(136, 141, 152, 0.5) !important; border-radius: 10px !important; background-clip: content-box !important; border:2px solid transparent !important; } ::-webkit-resizer { display: none !important; }
    </style>
  
    <style class="mpa-style-fix ImageGatherer">.FotorFrame{position:fixed!important}</style><style class="mpa-style-fix SideFunctionPanel">.weui-desktop-online-faq__wrp{top:304px!important;bottom:unset!important}.weui-desktop-online-faq__wrp .weui-desktop-online-faq__switch{width:38px!important}</style>
    <script>
        function fun1(){
            
            alert('不是吧！不是吧？'); 
            alert('不是吧....这个你也信？'); 
            alert('上班这么清闲？'); 
            alert('就这样来摸鱼？'); 
            alert('这么想要这个红包封面？');
            alert('不行..能不能换个方式摸鱼？？');
            alert('2022年你摸鱼赚了多少钱嘛？？');
            alert('薅了老板多少羊毛嘛？');
            alert('2023年打算怎么摸呢？');
            alert('认真工作叫赚工资！');
            alert('摸鱼才是赚钱好吧！');
            alert('好了，先这样了！');
            alert('恭喜你....');
            alert('已经成功了摸鱼了...');
            alert('我也不知道多少秒...');
            alert('自己算吧...');
            alert('好了....');
            alert('就让你们摸到这吧！');
            alert('不管别人怎么说你..');
            alert('记住了，摸鱼人！');
            alert('永远都要做好自己...');
            alert('摸自己的鱼....');
            alert('让他们去说吧...');
            alert('最后....');
            alert('摸鱼人日历，祝你');
            alert('有个万事顺意...');
            alert('平平安安...');
            alert('快快乐乐的2023');
            alert('接着摸鱼去...');
            alert('祝你新年快乐');
            window.close();
        }
  </script>
  </head>
  <body>
  
    
  
    <div data-v-521ffdeb="" class="red-cover-page show old-version">
    <div data-v-521ffdeb="" class="red-cover-mask">
    </div>
    <div data-v-521ffdeb="" class="wxHongbao_receive default">
    <div data-v-521ffdeb="" class="receive-status">
    <div data-v-521ffdeb="" class="receive-container">
    <div data-v-521ffdeb="" class="receive-icon-gift">
    </div>
    </div>
    <section data-v-521ffdeb="" class="receive-body">
    <section data-v-521ffdeb="" class="wxHongbao_info wxHongbao_amDefault wxHongbao_amFadeInDown">
    <div data-v-521ffdeb="" class="wxHongbao_info_nickname wxHongbao_text_line" _msthash="1829477" _msttexthash="13846274">小金同学阿</div>
    <div data-v-521ffdeb="" class="wxHongbao_info_body wxHongbao_text_line"><font _mstmutation="1" _msthash="1829620" _msttexthash="41545712">赠送给你一个红包封面</font><br data-v-521ffdeb="">
    </div>
    <div data-v-521ffdeb="" class="wxHongbao_info_corpname wxHongbao_text_line">
    <span data-v-521ffdeb="" _msthash="2318615" _msttexthash="17441021">今天你摸鱼了吗？</span>
    </div>
    </section>
    <section data-v-521ffdeb="" class="wxHongbao_skinBg wxHongbao_amDefault wxHongbao_amFadeInDown2">
    <div data-v-521ffdeb="" class="wxHongbao_info_imgWrap">
    <div data-v-521ffdeb="" class="wxHongbao_info_img new" style="background-image: url(https://www.iculture.cc/icon/2023/moyu.jpg);">
    <div data-v-521ffdeb="" class="wxHongbao_info_imgMark">
  
    </div>
    </div>
    <div data-v-521ffdeb="" class="receive-success-body">
    <div data-v-521ffdeb="" class="msg-title" _msthash="2697253" _msttexthash="8760388">已领取</div>
    <div data-v-521ffdeb="" class="msg-desc" _msthash="2697396" _msttexthash="135554107">发红包时，可在"红包封面"中查看和使用该封面。</div></div></div></section>
  
  
    <section data-v-521ffdeb="" class="wxHongbao_receive_btn_wrap wxHongbao_amDefault wxHongbao_amFadeIn">
    <a href="javascript:;" onclick="fun1()" class="wxhognbao_btn" _msthash="1696006" _msttexthash="15549014">领取并使用</a>
    <div data-v-521ffdeb="" class="wxHongbao_receive_tip" _msthash="1830166" _msttexthash="31259371">领取后三个月内有效</div>
    </section></section>
    </div></div></div>
  
    
  
  
  </body></html>

修改教程

修改红包封面赠送者

这里我们显示的是小金同学阿，你可以按需修改

修改红包封面名称

这里的红包封面的主题叫今天你摸鱼了吗？你可以按需修改成自己设计的

<span data-v-521ffdeb="" _msthash="2318615" _msttexthash="17441021">今天你摸鱼了吗？</span>

修改红包封面图片

代码第75行，你需要将https://www.iculture.cc/icon/2023/moyu.jpg替换为你的图片地址

<div data-v-521ffdeb="" class="wxHongbao_info_img new" style="background-image: url(https://www.iculture.cc/icon/2023/moyu.jpg);">

修改弹窗文案

弹窗文案是整个整蛊页面最灵魂的部分，第14行

<script>
        function fun1(){
            
            alert('不是吧！不是吧？'); 
            alert('不是吧....这个你也信？'); 
            alert('上班这么清闲？'); 
            alert('就这样来摸鱼？'); 
            alert('这么想要这个红包封面？');
            alert('不行..能不能换个方式摸鱼？？');
            alert('2022年你摸鱼赚了多少钱嘛？？');
            alert('薅了老板多少羊毛嘛？');
            alert('2023年打算怎么摸呢？');
            alert('认真工作叫赚工资！');
            alert('摸鱼才是赚钱好吧！');
            alert('好了，先这样了！');
            alert('恭喜你....');
            alert('已经成功了摸鱼了...');
            alert('我也不知道多少秒...');
            alert('自己算吧...');
            alert('好了....');
            alert('就让你们摸到这吧！');
            alert('不管别人怎么说你..');
            alert('记住了，摸鱼人！');
            alert('永远都要做好自己...');
            alert('摸自己的鱼....');
            alert('让他们去说吧...');
            alert('最后....');
            alert('猪猪安全，祝你');
            alert('有个万事顺意...');
            alert('平平安安...');
            alert('快快乐乐的2023');
            alert('接着摸鱼去...');
            alert('祝你新年快乐');
            window.close();
        }
  </script>

可以看到有诸多的alert('文案');

您一行写一个文案，在界面中弹出一次展示一次