如何為您的網站新增可點擊的訪客計數器

我正在考慮一些有趣且互動的東西來添加到我的作品集中，以及一個可點擊的計數器，訪客可以用它來留下一點“我在這裡”的消息，感覺這是一個好主意。它簡單、有吸引力，是讓您的網站感覺更個人化的好方法。如果這聽起來像您想要創建的東西，本指南將逐步引導您完成它。

我們將逐步建立一個功能齊全的視圖櫃檯。您無需成為經驗豐富的開發人員即可遵循。讓我們開始吧！

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。

就是這樣！您已經建立了一個有趣的互動式視圖計數器。這是吸引訪客並為您的網站增添個性的簡單方法。

請隨時造訪我的作品集以查看其實際效果。