基于jQuery实现仿QQ空间送礼物功能代码

下面是“基于jQuery实现仿QQ空间送礼物功能代码”的完整攻略。

简述

在实现了一个简单的聊天室之后，我们可以尝试着添加一些更加有趣的功能来丰富用户体验。其中一个很有趣的功能就是像QQ空间一样，可以给其他用户送礼物。

要实现这个功能，我们需要用到jQuery来进行DOM操作和事件绑定。具体来说，我们需要定义如下的数据结构来表示一个礼物：

{
  name: '礼物的名称',
  icon: '礼物的图标URL',
  price: '礼物的价格（虚拟币数量）',
  id: '礼物的唯一标识符'
}

然后，我们需要定义一个送礼物的函数，其大致逻辑如下：

1. 获取当前登录用户、要送礼物的用户、要送的礼物等信息；
2. 判断用户之间的关系（例如是好友还是陌生人）；
3. 计算所需的虚拟币数量；
4. 发送请求到后端进行扣款、记录日志等操作；
5. 在页面上显示送礼物的效果。

下面，我将详细讲解上述逻辑如何用代码实现。

准备工作

首先，在页面中引入jQuery库：

<script src="//cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

然后，在JS中定义如下的礼物数据：

const gifts = [
  { name: '小熊猫', icon: 'https://placekitten.com/g/100/100', price: 10, id: 'gift_1' },
  { name: '玫瑰花', icon: 'https://placeimg.com/100/100/flowers', price: 20, id: 'gift_2' },
  { name: '巧克力', icon: 'https://placeimg.com/100/100/nature', price: 30, id: 'gift_3' },
  { name: '冰淇淋', icon: 'https://placeimg.com/100/100/animals', price: 40, id: 'gift_4' },
  { name: '火箭', icon: 'https://placeimg.com/100/100/arch', price: 50, id: 'gift_5' },
];

实现送礼物的函数

首先，我们需要定义一个用来显示错误信息的函数：

function showError(msg) {
  $('.js-error').text(msg).show();
  setTimeout(function() {
    $('.js-error').fadeOut('slow');
  }, 3000);
}

然后，我们需要定义一个用来提示用户输入相关信息的函数：

function promptUser(callback) {
  const $modal = $('.js-prompt-modal');
  $modal.modal();

  $modal.on('click', '.js-ok', function() {
    const target = $modal.data('target');
    const value = $modal.find('input[name="value"]').val();
    $modal.modal('hide');
    callback(target, value);
  });

  $modal.on('hidden.bs.modal', function(e) {
    $modal.off();
    $modal.find('input[name="value"]').val('');
  });
}

最后，我们需要定义主函数 sendGift。该函数主要有以下几个步骤：

1. 获取当前登录用户、要送礼物的用户、要送的礼物等信息；
2. 判断用户之间的关系（例如是好友还是陌生人）；
3. 计算所需的虚拟币数量；
4. 发送请求到后端进行扣款、记录日志等操作；
5. 在页面上显示送礼物的效果。

function sendGift() {
  const $target = $(this).data('target');
  const $gift = $(this).data('gift');

  if (!$target) {
    return showError('请先选择用户！');
  }
  if (!$gift) {
    return showError('请先选择礼物！');
  }

  const myId = '我'; // 假设当前登录用户为“我”
  const targetId = $target.find('.username').text(); // 获取要送礼物的用户 ID
  const relationship = '好友'; // 假设当前用户与要送礼物的用户已经是好友关系

  let message;
  if (relationship === '好友') {
    message = `你确定要花费${$gift.price}虚拟币赠送给${targetId}吗？`;
  } else {
    message = `你确定要花费${$gift.price * 2}虚拟币向${targetId}赠送${$gift.name}吗？`;
  }
  if (!confirm(message)) {
    return;
  }

  let balance = 100; // 假设当前登录用户的虚拟币余额为 100
  const num = parseInt($target.find('.gift-num').text()) || 0; // 获取当前礼物数量
  const total = $gift.price + balance; // 计算所需花费的虚拟币数量
  if (total > balance) {
    return showError('对不起，你的虚拟币不足！');
  }

  // 发送请求到后端扣款、记录日志等操作，这里模拟一下：
  setTimeout(function() {
    balance -= $gift.price;

    // 在页面上显示送礼物的效果
    const $giftItem = $("<div class='gift-item'></div>");
    const $giftIcon = $(`<img class='gift-icon' src='${$gift.icon}' />`);
    const $giftNum = $("<span class='gift-num'>1</span>");
    $giftItem.append($giftIcon, $giftNum);
    $target.find('.gifts').append($giftItem);

    // 更新用户余额
    $('.js-balance').text(balance);

    // 显示送礼物成功的信息
    const msg = `你成功向${targetId}赠送了${$gift.name}！`;
    alert(msg);
  }, 1000);
}

添加事件监听器

最后，我们需要在页面加载完成之后，给送礼物按钮添加监听器：

$(function() {
  $('.js-send-gift').click(sendGift);
});

示例说明

示例一

假设当前登录用户为“我”，要送一只小熊猫给“Alice”，那么我们需要做如下操作：

1. 选择用户：在页面中找到用户名为“Alice”的用户卡片，单击其“送礼物”按钮；
2. 选择礼物：在弹出的对话框中，选择礼物“小熊猫”；
3. 确认：在弹出的确认对话框中，确认要花费10虚拟币送礼物；
4. 等待：等待后端响应，如果虚拟币充足，则页面上会出现一只小熊猫的图标，代表礼物已经送出。

示例二

假设当前登录用户为“我”，要送一朵玫瑰花给“Tom”，但是“Tom”是当前用户的陌生人，那么我们需要做如下操作：

1. 选择用户：在页面中找到用户名为“Tom”的用户卡片，单击其“送礼物”按钮；
2. 选择礼物：在弹出的对话框中，选择礼物“玫瑰花”；
3. 确认：在弹出的确认对话框中，确认要花费40虚拟币送礼物；
4. 错误提示：页面会出现错误提示，说明虚拟币不足或者“Tom”没有成为好友。

总结

到这里，我们就完成了基于jQuery实现仿QQ空间送礼物功能代码的实现。在实现这个功能过程中，我们学习了如何使用jQuery进行DOM操作和事件绑定，以及如何处理用户与后端之间的交互。这些知识点对于Web前端开发人员来说是非常基础的，应该熟练掌握。