HTML简单打赏模块

这段代码是一个网页上的赞助支持区域，功能很简单，就是让用户能通过微信或支付宝给某个平台赞助。我用大白话给你拆解下：

• 整体样子：页面上有个专门的赞助板块，背景是白色的，文字主要是深灰和浅灰色，看起来比较清爽。
• 内容部分：
  • 顶部有 “感谢您的赞助支持！” 的标题
  • 下面有一段说明文字，意思是感谢用户的赞助，会继续努力提供更好的服务，还提到可以扫码赞助
  • 有两个按钮，分别是 “微信赞助” 和 “支付宝赞助”
  • 按钮下面是二维码区域，默认显示微信的收款码，支付宝的二维码一开始是隐藏的
• 功能特点：
  • 点 “微信赞助” 按钮，就会显示微信的二维码，同时这个按钮会变成灰色（不能再点），支付宝按钮则可以点击
  • 点 “支付宝赞助” 按钮，就会切换显示支付宝的二维码，这时支付宝按钮变灰，微信按钮可以点击
  • 每个二维码下面都有文字标注，方便用户确认

简单说，这就是一个让用户能选择用微信或支付宝扫码赞助的网页模块，交互很直观，点哪个按钮就显示哪个对应的收款码。

<style>
    .sponsor-section {
        font-family: 'Arial', sans-serif;
        text-align: center;
        padding: 20px;
        background-color: #f9f9f9;
       background-color: #ffffff; /* 背景改为白色 */
        color: #333;
    }

    .sponsor-section h1 {
        color: #2c3e50;
        margin-top: 20px;
    }

    .sponsor-section p {
        color: #7f8c8d;
        line-height: 1.6;
    }

    .btn-container {
        margin-top: 20px;
    }

    button {
        padding: 12px 24px;
        margin: 0 10px;
        background-color: #3498db;
        color: white;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-size: 16px;
        transition: background-color 0.3s ease;
    }

    button:hover {
        background-color: #2980b9;
    }

    button:disabled {
        background-color: #bdc3c7;
        cursor: not-allowed;
    }

    .qr-code {
        margin-top: 30px;
        display: none; /* 默认隐藏 */
    }

    .qr-code img {
        width: 200px;
        height: 200px;
        border: 1px solid #ddd;
        border-radius: 6px;
    }

    .qr-code p {
        margin-top: 10px;
        font-weight: bold;
        color: #2c3e50;
    }

    .active {
        display: block;
    }
</style>

<div class="sponsor-section">
    <h2>感谢您的赞助支持！</h2>
    <p>您的赞助是对我们最大的鼓励和支持，我们会继续努力，为您提供更好的服务和内容。<br>如果您愿意支持我们，可以通过扫描下方的二维码进行赞助，感谢您的慷慨！</p>

    <div class="btn-container">
        <button id="wechat-btn" onclick="showQR('wechat')">微信赞助</button>
        <button id="alipay-btn" onclick="showQR('alipay')">支付宝赞助</button>
    </div>

    <div class="qr-code" id="wechat-qr" style="display: block;"> <!-- 默认显示微信二维码 -->
        <img src="https://pic.fenx.top/view.php/f7864cc479af97a2c7efda35c13cdf38.png" alt="微信收款码">
        <p>微信赞助</p>
    </div>

    <div class="qr-code" id="alipay-qr">
        <img src="https://pic.fenx.top/view.php/d424ca8e0a127b2034b08ed538a219b7.png" alt="支付宝收款码">
        <p>支付宝赞助</p>
    </div>
</div>

<script>
    // 页面加载时默认显示微信二维码并禁用微信按钮
    document.getElementById('wechat-btn').disabled = true;
    document.getElementById('alipay-btn').disabled = false;

    function showQR(type) {
        const wechatQR = document.getElementById('wechat-qr');
        const alipayQR = document.getElementById('alipay-qr');
        const wechatBtn = document.getElementById('wechat-btn');
        const alipayBtn = document.getElementById('alipay-btn');

        if (type === 'wechat') {
            wechatQR.style.display = 'block';
            alipayQR.style.display = 'none';
            wechatBtn.disabled = true;
            alipayBtn.disabled = false;
        } else if (type === 'alipay') {
            alipayQR.style.display = 'block';
            wechatQR.style.display = 'none';
            alipayBtn.disabled = true;
            wechatBtn.disabled = false;
        }
    }
</script>