如何向您的网站添加可点击的访客计数器

我正在考虑一些有趣且互动的东西来添加到我的作品集中，以及一个可点击的计数器，访客可以用它来留下一点“我在这里”的消息，感觉这是一个好主意。它简单、有吸引力，是让您的网站感觉更加个性化的好方法。如果这听起来像您想要创建的东西，本指南将逐步引导您完成它。

我们将逐步构建一个功能齐全的视图柜台。您无需成为经验丰富的开发人员即可遵循。让我们开始吧！

1. HTML：构建结构

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

<div>



<h2>
  
  
  2. The CSS: Styling the Counter
</h2>

<p>Let’s add some simple styling to make the counter look clean and centered. Here’s the CSS:<br>
</p>

<pre class="brush:php;toolbar:false">.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. 用 Ja​​vascript 让它变得栩栩如生

现在是主要活动，让柜台工作。
这是 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');
    }
  });
});

分解：

1. 获取访客 IP：使用 ipify 获取访客的 IP 地址。
2. 获取 Bin 数据：从 JSONBin 中检索当前总点击量和 IP 列表。
3. 更新 Bin 数据：更新 JSONBin 中的点击计数和 IP 列表。
4. 防止多次点击：检查访问者是否已经单击，如果是则禁用该按钮。

4. 设置 JSONBin

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

1. 前往 JSONBin.io 并注册一个免费帐户。
2. 使用以下初始数据创建一个新的 bin：

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

1. 保存 bin 后，从 bin 详细信息页面复制 Bin ID。
2. 转到您的帐户设置以生成API 密钥。
3. 将 JavaScript 代码中的 YOUR_BIN_ID 和 YOUR_API_KEY 替换为您的实际 Bin ID 和 API Key。

就是这样！您已经构建了一个有趣的交互式视图计数器。这是吸引访问者并为您的网站增添个性的简单方法。

请随时访问我的作品集以查看其实际效果。