如何在您的网站上添加可点击的会员积分

我正在考虑为我的投资组合添加一些有趣且互动性强的内容，而一个可点击的计数器，访问者可以使用它来留下“我来过这里”的消息，这似乎是一个好主意。它简单、引人入胜，是让您的网站感觉更个性化的好方法。如果这听起来像您想创建的东西，本指南将逐步指导您完成它。

我们将逐步介绍如何构建一个功能齐全的视图计数器。您无需成为经验丰富的开发人员即可跟进。让我们开始吧！

1. HTML：构建结构

首先，我们将设置视图计数器的结构。虽然您可以使用任何您喜欢的图标或按钮样式，但在本教程中我将使用眼睛图标。以下是 HTML 代码：

2. CSS：设置计数器的样式

让我们添加一些简单的样式，使计数器看起来干净且居中。以下是 CSS：

.eye-counter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.eye-button {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.1);
  color: #333;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.eye-button:hover {
  transform: scale(1.05);
  background-color: rgba(255, 255, 255, 0.2);
}

.eye-icon {
  fill: currentColor;
}

.view-count {
  font-size: 1rem;
  font-weight: bold;
}

此 CSS 将计数器置于页面中央，并为按钮添加一些悬停效果。

3. 使用 JavaScript 让它变得生动

现在轮到主要事件了，让计数器发挥作用。

以下是 JavaScript，为了简单起见，将其分解为几个函数：

// Run code after the page has loaded
document.addEventListener('DOMContentLoaded', async () => {
  const eyeButton = document.querySelector('.eye-button');
  const viewCount = document.querySelector('.view-count');

  const BIN_URL = 'https://api.jsonbin.io/v3/b/YOUR_BIN_ID'; // Replace with your bin URL
  const API_KEY = 'YOUR_API_KEY'; // Replace with your API key

  // Function to get the visitor's IP address
  async function getVisitorIP() {
    try {
      const response = await fetch('https://api.ipify.org?format=json');
      const data = await response.json();
      return data.ip;
    } catch (error) {
      console.error('Error fetching IP:', error);
      return null;
    }
  }

  // Function to fetch data from JSONBin
  async function fetchBinData() {
    const response = await fetch(BIN_URL, {
      headers: {
        'X-Master-Key': API_KEY
      }
    });
    const result = await response.json();
    return result.record;
  }

  // Function to update data in JSONBin
  async function updateBinData(data) {
    await fetch(BIN_URL, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
        'X-Master-Key': API_KEY
      },
      body: JSON.stringify(data)
    });
  }

  // Main logic
  const visitorIP = await getVisitorIP();
  if (!visitorIP) {
    eyeButton.classList.add('disabled');
    return;
  }

  const binData = await fetchBinData();
  viewCount.textContent = binData.totalClicks;

  if (binData.clickedIPs.includes(visitorIP)) {
    eyeButton.classList.add('disabled');
  }

  eyeButton.addEventListener('click', async () => {
    if (!eyeButton.classList.contains('disabled')) {
      binData.totalClicks += 1;
      binData.clickedIPs.push(visitorIP);

      await updateBinData(binData);

      viewCount.textContent = binData.totalClicks;
      eyeButton.classList.add('disabled');
    }
  });
});

具体分析：

获取访客 IP：使用 ipify 获取访客的 IP 地址。

获取 Bin 数据：从 JSONBin 中检索当前总点击次数和 IP 列表。

更新Bin数据：更新JSONBin中的点击次数和IP列表。

防止多次点击：检查访问者是否已经点击，如果是则禁用该按钮。

4.设置 JSONBin

如果你以前从未使用过 JSONBin，请不要担心！请按照以下步骤操作：

前往 JSONBin.io 并注册一个免费账户。

使用以下初始数据创建一个新箱子：

{
     "totalClicks": 0,
     "clickedIPs": []
   }

保存bin后，从bin详情页面复制Bin ID。

转到您的帐户设置来生成 API 密钥。

将 JavaScript 代码中的 YOUR_BIN_ID 和 YOUR_API_KEY 替换为您实际的 Bin ID 和 API Key。

就这样！您已经创建了一个有趣且互动的浏览计数器。这是吸引访客并为您的网站增添个性的简单方法。

欢迎随时访问我的投资组合来查看其实际运作情况。