基于html+jquery实现的网站打赏组件

喜欢ヅ旅行 2023-10-03 19:34 4阅读 0赞

> 如果你希望在你自己的网站上添加上打赏组件功能，可以参考我实现的打赏组件功能。
> 
> 当点击打赏按钮的时候，会在网页正中间显示打赏二维码，支持多种打赏方式。

**目录**

一、效果演示图

二、程序源代码

--------------------

## 一、效果演示图 ##

![9613d4f4f6a144ffaf594881f9382b96.png][]

## 二、程序源代码 ##

<!DOCTYPE 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.0">
        <title>打赏组件</title>
        <style>
            .footer_flex .flex-footer {
                box-shadow: 0px 0px 5px 0px #409eff;
                border-radius: 8px;
                width: 300px;
                height: 166px;
                position: absolute;
                left: 100px;
                top: 200px;
                text-align: center;
                padding-top: 15px;
                background: #fff;
                display: none;
            }
    
            .flex-footer input {
                vertical-align: middle;
                margin-bottom: 3px;
                *margin-bottom: 3px;
            }
        </style>
        <script src="https://www.ewbang.com/dist/js/jquery.min.js"></script>
    </head>
    
    <body>
        <div style="text-align: center; margin-left:30px; ">
    
            <div class="footer_flex">
                <div class="flex-footer">
                    <img id="ewm" src="https://ewbangcom.oss-cn-hangzhou.aliyuncs.com/static/weixin/gzh.jpg" width="120px"
                        height="120px">
                    <div style="margin-top:5px;">
                        <label><input name="pay" type="radio" value="wx" checked="checked" onclick="wx()">微信</label>
                        <label style="margin-left:3px; display:block-inline"><input name="pay" type="radio" value="zfb"
                                onclick="zfb()">支付宝</label>
                    </div>
                    <div style="height:40px; background:rgba(0,0,0,0);"></div>
                </div>
            </div>
        </div>
        <button onclick="shang()">
            打赏
        </button>
        <script language="javascript" type="text/javascript">
            function zfb() {
                var obj = document.getElementById("ewm");
                obj.src = `https://file.ewbang.com/static/donate/zfb.png`;
            };
    
            function wx() {
                var obj = document.getElementById("ewm");
                obj.src = `https://file.ewbang.com/static/donate/weixin.png`;
            };
    
            function shang() {
                let obj = $(".flex-footer");
                let isHidden = obj.is(':hidden');
                if (isHidden) {
                    let screenWidth = $(window).width();
                    screenHeight = $(window).height(); //当前浏览器窗口的 宽高
                    let scrolltop = $(document).scrollTop(); //获取当前窗口距离页面顶部高度
                    let objLeft = (screenWidth - obj.width()) / 2;
                    let objTop = (screenHeight - obj.height()) / 2 + scrolltop;
                    obj.css({
                        left: objLeft + 'px',
                        top: objTop + 'px',
                        'display': 'block'
                    });
                    obj.show();
                } else {
                    obj.hide();
                }
    
    
            }
        </script>
    
    </body>
    
    </html>

[9613d4f4f6a144ffaf594881f9382b96.png]: https://img-blog.csdnimg.cn/9613d4f4f6a144ffaf594881f9382b96.png