웹사이트에 클릭 가능한 방문자 카운터를 추가하는 방법

저는 포트폴리오에 추가할 수 있는 재미 있고 상호 작용적인 무언가와 방문자가 "나는 여기에 있었습니다"라는 메시지를 남기기 위해 사용할 수 있는 클릭 가능한 카운터를 생각하고 있었습니다. 이는 간단하고 매력적이며 웹사이트를 좀 더 개인적인 느낌으로 만들 수 있는 좋은 방법입니다. 만들고 싶은 것이 있다면 이 가이드가 단계별로 안내해 드립니다.

모든 기능을 갖춘 뷰 카운터를 구축하는 과정을 단계별로 살펴보겠습니다. 따라하기 위해 숙련된 개발자일 필요는 없습니다. 뛰어들어 보세요!

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. 자바스크립트로 현실화하기

이제 메인 이벤트로 카운터를 작동시키겠습니다.
다음은 간단하게 유지하기 위해 함수로 분류된 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. Fetch Bin Data: JSONBin에서 현재 총 클릭수와 IP 목록을 검색합니다.
3. 빈 데이터 업데이트: JSONBin의 클릭 수와 IP 목록을 업데이트합니다.
4. 다중 클릭 방지: 방문자가 이미 클릭했는지 확인하고, 그렇다면 버튼을 비활성화합니다.

4. JSONBin 설정

JSONBin을 사용해 본 적이 없더라도 걱정하지 마세요! 다음 단계를 따르세요.

1. JSONBin.io로 이동하여 무료 계정에 가입하세요.
2. 다음 초기 데이터를 사용하여 새 저장소를 만듭니다.

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

1. 빈을 저장한 후, 빈 세부정보 페이지에서 빈 ID를 복사하세요.
2. API 키를 생성하려면 계정 설정으로 이동하세요.
3. JavaScript 코드의 YOUR_BIN_ID 및 YOUR_API_KEY를 실제 Bin ID 및 API 키로 바꾸세요.

그렇습니다! 재미있고 대화형 뷰 카운터를 만들었습니다. 방문자의 참여를 유도하고 사이트에 개성을 더할 수 있는 간단한 방법입니다.

제 포트폴리오를 방문하여 실제 작동하는 모습을 확인하세요.

위 내용은 웹사이트에 클릭 가능한 방문자 카운터를 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!