个人网站的打赏功能：极简实现

2023-12-09 10:28:08

在个人网站博客中，打赏赞助是对作者的一种支持与鼓励，是很常见的功能。本文将分享一种非常简单的方式，来实现打赏功能。

在以往，实现打赏功能通常需要复杂的技术手段，例如接入第三方支付平台、编写后端代码等。而现在，借助于前端技术的发展，我们可以通过纯前端的方式，轻松实现打赏功能。

具体步骤如下：

添加 HTML 代码：

<div id="reward-container">
  <button id="reward-btn">打赏</button>
</div>

导入脚本：

<script src="reward.js"></script>

编写 JavaScript 代码：

// 获取 DOM 元素
const rewardContainer = document.getElementById('reward-container');
const rewardBtn = document.getElementById('reward-btn');

// 创建打赏弹窗
const rewardModal = document.createElement('div');
rewardModal.classList.add('reward-modal');
rewardModal.innerHTML = `
  <div class="reward-modal-content">
    <p>感谢您的支持！</p>
    <form>
      <input type="text" placeholder="金额" id="reward-amount" />
      <button type="submit" id="reward-submit">打赏</button>
    </form>
  </div>
`;

// 显示打赏弹窗
rewardBtn.addEventListener('click', () => {
  rewardContainer.appendChild(rewardModal);
  rewardModal.classList.add('active');
});

// 关闭打赏弹窗
rewardModal.addEventListener('click', (e) => {
  if (e.target === rewardModal) {
    rewardModal.classList.remove('active');
  }
});

// 提交打赏
const rewardForm = rewardModal.querySelector('form');
rewardForm.addEventListener('submit', (e) => {
  e.preventDefault();

  // 获取打赏金额
  const amount = e.target.querySelector('#reward-amount').value;

  // 发送打赏请求（此处为模拟，实际应接入第三方支付平台）
  console.log(`已打赏：${amount}`);

  // 关闭打赏弹窗
  rewardModal.classList.remove('active');
});