Cara Menambah Kaunter Pelawat Boleh Diklik pada Tapak Web Anda

Saya sedang memikirkan sesuatu yang menyeronokkan dan interaktif untuk ditambahkan pada portfolio saya dan kaunter boleh klik yang boleh digunakan oleh pelawat untuk meninggalkan sedikit mesej "Saya berada di sini" dirasakan seperti idea yang bagus. Ia mudah, menarik dan cara yang bagus untuk menjadikan tapak web anda berasa lebih peribadi. Jika ini kelihatan seperti sesuatu yang anda ingin buat, panduan ini akan membimbing anda melaluinya langkah demi langkah.

Kami akan meneruskan pembinaan kaunter paparan berfungsi sepenuhnya langkah demi langkah. Anda tidak perlu menjadi pembangun berpengalaman untuk mengikutinya. Mari selami!

1. HTML: Membina Struktur

Pertama, kami akan menyediakan struktur untuk kaunter paparan. Walaupun anda boleh menggunakan mana-mana ikon atau gaya butang yang anda suka, saya akan menggunakan ikon mata untuk tutorial ini. Inilah kod 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 ini memusatkan kaunter pada halaman dan menambahkan beberapa kesan tuding untuk butang.

3. Menghidupkannya dengan Javascript

Sekarang untuk acara utama, membuat kaunter berfungsi.
Berikut ialah JavaScript, dipecahkan kepada fungsi untuk menjadikannya mudah:

// 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');
    }
  });
});

Memecahkannya:

1. Dapatkan IP Pelawat: Ambil alamat IP pelawat menggunakan ipify.
2. Ambil Data Bin: Mendapatkan semula jumlah klik semasa dan senarai IP daripada JSONBin.
3. Kemas kini Data Bin: Mengemas kini kiraan klik dan senarai IP dalam JSONBin.
4. Halang Berbilang Klik: Menyemak sama ada pelawat telah mengklik dan melumpuhkan butang jika ya.

4. Menyediakan JSONBin

Jika anda tidak pernah menggunakan JSONBin sebelum ini, jangan risau! Ikuti langkah ini:

1. Pergi ke JSONBin.io dan daftar untuk mendapatkan akaun percuma.
2. Buat tong baharu dengan data awal berikut:

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

1. Selepas menyimpan tong, salin ID Bin daripada halaman butiran tong.
2. Pergi ke tetapan akaun anda untuk menjana Kunci API.
3. Ganti YOUR_BIN_ID dan YOUR_API_KEY dalam kod JavaScript dengan Bin ID dan Kunci API anda yang sebenar.

Itu sahaja! Anda telah membina kaunter paparan yang menyeronokkan dan interaktif. Ini cara mudah untuk menarik perhatian pelawat dan menambahkan sentuhan personaliti pada tapak anda.

Sila lawati portfolio saya untuk melihatnya beraksi.

Atas ialah kandungan terperinci Cara Menambah Kaunter Pelawat Boleh Diklik pada Tapak Web Anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!