私のポートフォリオに追加する楽しくてインタラクティブなものを考えていました。訪問者が「ここにいたよ」というちょっとしたメッセージを殘すために使用できるクリック可能なカウンターは素晴らしいアイデアだと感じました。これはシンプルで魅力的で、Web サイトをもう少しパーソナルなものにする素晴らしい方法です。これを作成してみたいと思われる場(chǎng)合は、このガイドで段階的に説明します。

完全に機(jī)能するビューカウンターを段階的に構(gòu)築していきます。経験豊富な開発者である必要はありません。飛び込んでみましょう!

1. HTML: 構(gòu)造の構(gòu)築

まず、ビューカウンターの構(gòu)造を設(shè)定します。好きなアイコンやボタンのスタイルを使用できますが、このチュートリアルでは目のアイコンを使用します。 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 で命を吹き込む

次はメインイベントで、カウンターを機(jī)能させます。
以下は、シンプルにするために関數(shù)に分割された 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');
    }
  });
});

內(nèi)訳:

1. 訪問者 IP の取得: ipify を使用して訪問者の IP アドレスを取得します。
2. Fetch Bin Data: JSONBin から現(xiàn)在の合計(jì)クリック數(shù)と IP リストを取得します。
3. Update Bin Data: JSONBin のクリック數(shù)と IP リストを更新します。
4. 複數(shù)のクリックを防止: 訪問者がすでにクリックしたかどうかを確認(rèn)し、クリックしている場(chǎng)合はボタンを無効にします。

4. JSONBinの設(shè)定

これまでに JSONBin を使用したことがなくても、心配する必要はありません。次の手順に従ってください:

1. JSONBin.io にアクセスし、無料アカウントにサインアップします。
2. 次の初期データを使用して新しいビンを作成します。

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

1. ビンを保存した後、ビンの詳細(xì)ページから ビン ID をコピーします。
2. アカウント設(shè)定に移動(dòng)して、API キーを生成します。
3. JavaScript コード內(nèi)の YOUR_BIN_ID と YOUR_API_KEY を?qū)g際の Bin ID と API キーに置き換えます。

それだけです！楽しくてインタラクティブなビューカウンターが完成しました。これは、訪問者を惹きつけ、サイトに個(gè)性を加える簡単な方法です。

お?dú)葺Xに私のポートフォリオにアクセスして実際の動(dòng)作をご覧ください。

以上がクリック可能な訪問者カウンターを Web サイトに追加する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。