用js实现博客打赏功能

下面是用js实现博客打赏功能的完整攻略：

1. 创建打赏功能需要的元素

首先，需要在博客页面中创建打赏功能需要用到的元素，包括“打赏按钮”、“打赏列表”、“打赏表单”等。可以使用html和css来创建这些元素。

示例1：创建“打赏按钮”

<button id="rewardBtn">打赏</button>

#rewardBtn {
  padding: 8px 16px;
  background-color: #f60;
  color: #fff;
  border: none;
  border-radius: 4px;
}

示例2：创建“打赏列表”

<div id="rewardList"></div>

#rewardList {
  margin-top: 20px;
  padding: 10px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 4px;
}

2. 实现打赏弹窗功能

用户点击“打赏按钮”后，需要弹出一个打赏窗口，让用户填写打赏金额和留言等信息。可以使用js来实现这个功能。

示例3：创建打赏弹窗页面

<div id="rewardWindow" style="display: none;">
  <h3>打赏作者</h3>
  <form id="rewardForm">
    <input type="number" name="amount" placeholder="请输入打赏金额" required>
    <textarea name="message" placeholder="请输入留言"></textarea>
    <button type="submit">打赏</button>
  </form>
</div>

#rewardWindow {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
}
#rewardWindow h3 {
  margin-top: 0;
}
#rewardForm {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#rewardForm input[type="number"], #rewardForm textarea {
  margin-top: 10px;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ddd;
  width: 100%;
}
#rewardForm button {
  margin-top: 20px;
  padding: 8px 16px;
  background-color: #f60;
  color: #fff;
  border: none;
  border-radius: 4px;
}

示例4：实现打赏按钮点击事件

var rewardBtn = document.getElementById('rewardBtn');
var rewardWindow = document.getElementById('rewardWindow');

rewardBtn.addEventListener('click', function() {
  rewardWindow.style.display = 'block';
});

示例5：实现打赏表单提交事件

var rewardForm = document.getElementById('rewardForm');
var rewardList = document.getElementById('rewardList');

rewardForm.addEventListener('submit', function(event) {
  event.preventDefault();
  var amount = this.amount.value;
  var message = this.message.value;
  var rewardItem = document.createElement('div');
  rewardItem.innerText = '打赏' + amount + '元，留言：' + message;
  rewardList.appendChild(rewardItem);
  rewardWindow.style.display = 'none';
  this.reset();
});

3. 添加后台数据处理功能

如果要将打赏数据保存到后台，还需要添加后台数据处理功能。可以使用ajax来实现数据的发送和接收。

示例6：实现ajax发送打赏数据

var rewardForm = document.getElementById('rewardForm');

rewardForm.addEventListener('submit', function(event) {
  event.preventDefault();
  var amount = this.amount.value;
  var message = this.message.value;
  var data = {
    amount: amount,
    message: message
  };
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/api/reward');
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.onload = function() {
    if (xhr.status === 200) {
      var rewardItem = document.createElement('div');
      rewardItem.innerText = '打赏' + amount + '元，留言：' + message;
      rewardList.appendChild(rewardItem);
      rewardWindow.style.display = 'none';
      rewardForm.reset();
    }
  };
  xhr.send(JSON.stringify(data));
});

示例7：实现后台数据接收和处理

var express = require('express');
var bodyParser = require('body-parser');
var app = express();

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

app.post('/api/reward', function(req, res) {
  var amount = req.body.amount;
  var message = req.body.message;
  // 将数据保存到数据库中
  res.status(200).json({});
});

app.listen(3000, function() {
  console.log('server is running...');
});

以上就是用js实现博客打赏功能的完整攻略。其中示例1和示例2为创建打赏功能需要的元素，示例3和示例4为实现打赏弹窗功能，示例5为实现打赏表单提交事件，示例6为实现ajax发送打赏数据，示例7为实现后台数据接收和处理。