排行榜 统计
  • 建站日期:2021-1-1
  • 文章总数:38 篇
  • 评论总数:52 条
  • 分类总数:8 个
  • 最后更新:8月2日

网站添加仿bilibili充电样式打赏按钮【全网首发】

本文阅读 2 分钟

纯代码网站添加仿bilibili充电样式打赏按钮【全网首发】


样式演示
微信抢红包助手V2.0

## 软件介绍 ## > 微信抢红包助手V2.0 安卓免Root版 自动抢红包神器,支持后台秒抢、网络优化、一键加速。拆红包快人一步,抢钱就是这么任性,不用一直盯....


充电
打赏
二维码

HTML

在需要的地方添加以下代码

<link rel="stylesheet" type="text/css" href="donate.css"><div class="entry-shang text-center"><div id="con"><div id="TA-con"><div id="text-con"><div id="linght"></div><div id="TA" class="zs show-zs">为TA充电</div></div></div><div id="tube-con">
          <svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1 77H234.226L307.006 24H790" stroke="#e5e9ef" stroke-width="20" />
            <path d="M0 140H233.035L329.72 71H1028" stroke="#e5e9ef" stroke-width="20" />
            <path d="M1 255H234.226L307.006 307H790" stroke="#e5e9ef" stroke-width="20" />
            <path d="M0 305H233.035L329.72 375H1028" stroke="#e5e9ef" stroke-width="20" />
            <rect y="186" width="236" height="24" fill="#e5e9ef" />
            <ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#e5e9ef" />
            <circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white" />
            <ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#e5e9ef" />
            <circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white" />
          </svg>
          <div id="mask">
            <svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1 77H234.226L307.006 24H790" stroke="#f25d8e" stroke-width="20" />
              <path d="M0 140H233.035L329.72 71H1028" stroke="#f25d8e" stroke-width="20" />
              <path d="M1 255H234.226L307.006 307H790" stroke="#f25d8e" stroke-width="20" />
              <path d="M0 305H233.035L329.72 375H1028" stroke="#f25d8e" stroke-width="20" />
              <rect y="186" width="236" height="24" fill="#f25d8e" />
              <ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#f25d8e" />
              <circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white" />
              <ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#f25d8e" />
              <circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white" />
            </svg>
          </div>
          <div id="orange-mask" >
            <svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1 77H234.226L307.006 24H790" stroke="#ffd52b" stroke-width="20" />
              <path d="M0 140H233.035L329.72 71H1028" stroke="#ffd52b" stroke-width="20" />
              <path d="M1 255H234.226L307.006 307H790" stroke="#ffd52b" stroke-width="20" />
              <path d="M0 305H233.035L329.72 375H1028" stroke="#ffd52b" stroke-width="20" />
              <rect y="186" width="236" height="24" fill="#ffd52b" />
              <ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#ffd52b" />
              <circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white" />
              <ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#ffd52b" />
              <circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white" />
            </svg>
          </div><p id="people">共 <b>7</b> 人</p></div>
        </div>
</div>
<div class="zs-modal-bg"></div>
<div class="zs-modal-box">
    <div class="zs-modal-head">
        <button type="button" class="close">×</button>
        <p class="author">
            <a href="https://jq.qq.com/?_wv=1027&k=5WWG27EA">

            洛唯科技</a>
        </p>
        <p class="tip"><i></i><span> (๑>ڡ<)☆谢谢老板~</span></p>
    </div>
    <div class="zs-modal-body">
        <div class="zs-modal-btns">
            <button class="btn btn-blink" data-num="2">2元</button>
            <button class="btn btn-blink" data-num="5">5元</button>
            <button class="btn btn-blink" data-num="10">10元</button>
            <button class="btn btn-blink" data-num="50">50元</button>
            <button class="btn btn-blink" data-num="100">100元</button>
            <button class="btn btn-blink" data-num="any">任意金额</button>
        </div>
        <div class="zs-modal-pay">
            <button class="btn btn-bred" id="pay-text">2元</button>
            <p>使用<span id="pay-type">微信</span>扫描二维码完成支付</p>
            <img src="./images/alipay-2.jpg" id="pay-image"/>
        </div>
    </div>
    <div class="zs-modal-footer">
        <label style="float: left;width: 130px;">
            <input type="radio" name="zs-type" value="alipay" class="zs-type" checked="checked" style="float: left;">
            <span class="zs-alipay">
                
            </span>
        </label>
        <label style="float: left;width: 130px;">
            <input type="radio" name="zs-type" value="wechat" class="zs-type" style="float: left;">
            <span class="zs-wechat">
                
            </span>
        </label>
    </div>
</div>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/zanshang.js"></script>

css样式
将附件中的
donate.css
丢入根目录

js
将附件中的
js
丢入根目录,二维码图片调用地址在
zanshang.js
中修改有注释
二维码图片是放在当前目录中的
images
文件中的,支付宝和微信的命名规则为:
type+'-'+data-num
。详细规则在zanshang.js里有。
千万记得要改哦~不然钱就会到我这里啦~

  • 如果图片出了bug,检查下是不是路径的问题。
  • 如果js出了问题,弹窗出不来,同理F12检查路径是否出错
  • 如果css出了问题,F12自己针对自己使用的主题修一下。

温馨提示:登录后可阅读隐藏的内容。 登录可见
为TA充电

7

洛唯科技

(๑>ڡ<)☆谢谢老板~

使用微信扫描二维码完成支付

原创文章,作者:洛唯科技,如若转载,请注明出处:https://52yi.fun/36
-- 展开阅读全文 --
nmsl?那没事了?拼音在线翻(附在线扫雷+九宫格)
« 上一篇 02-05
【有趣好玩地图类】良心网站推荐第0001期
下一篇 » 02-08

发表评论

成为第一个评论的人

作者信息

最多点赞

13赞, 阅读:962
12赞, 阅读:498
10赞, 阅读:849
10赞, 阅读:583
LOVE
love love love

标签TAG

热评文章