Ich habe über etwas Lustiges und Interaktives nachgedacht, das ich meinem Portfolio hinzufügen k?nnte, und ein anklickbarer Z?hler, den Besucher nutzen k?nnen, um eine kleine ?Ich war hier“-Nachricht zu hinterlassen, kam mir wie eine gro?artige Idee vor. Es ist einfach, ansprechend und eine gro?artige M?glichkeit, Ihre Website etwas pers?nlicher zu gestalten. Wenn das nach etwas klingt, das Sie gerne erstellen würden, führt Sie dieser Leitfaden Schritt für Schritt durch die Umsetzung.

Wir werden Schritt für Schritt durch den Aufbau eines voll funktionsf?higen Ansichtsz?hlers gehen. Sie müssen kein erfahrener Entwickler sein, um mitzumachen. Lasst uns eintauchen!

1. Das HTML: Aufbau der Struktur

Zuerst richten wir die Struktur für den Aufrufz?hler ein. W?hrend Sie jedes beliebige Symbol oder jeden beliebigen Schaltfl?chenstil verwenden k?nnen, verwende ich für dieses Tutorial ein Augensymbol. Hier ist der HTML-Code:

<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;
}

Dieses CSS zentriert den Z?hler auf der Seite und fügt einige Hover-Effekte für die Schaltfl?che hinzu.

3. Mit Javascript zum Leben erwecken

Jetzt zum Hauptereignis: Damit der Schalter funktioniert.
Hier ist das JavaScript, zur Vereinfachung in Funktionen unterteilt:

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

Aufschlüsselung:

1. Besucher-IP abrufen: Ruft die IP-Adresse des Besuchers mit ipify ab.
2. Bin-Daten abrufen: Ruft die aktuelle Gesamtzahl der Klicks und die IP-Liste von JSONBin ab.
3. Bin-Daten aktualisieren: Aktualisiert die Klickanzahl und die IP-Liste in JSONBin.
4. Mehrfachklicks verhindern: überprüft, ob der Besucher bereits geklickt hat und deaktiviert die Schaltfl?che, wenn dies der Fall ist.

4. JSONBin einrichten

Wenn Sie JSONBin noch nie zuvor verwendet haben, machen Sie sich keine Sorgen! Befolgen Sie diese Schritte:

1. Gehen Sie zu JSONBin.io und registrieren Sie sich für ein kostenloses Konto.
2. Erstellen Sie eine neue Bin mit den folgenden Ausgangsdaten:

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

1. Kopieren Sie nach dem Speichern der Bin die Bin-ID von der Bin-Detailseite.
2. Gehen Sie zu Ihren Kontoeinstellungen, um einen API-Schlüssel zu generieren.
3. Ersetzen Sie YOUR_BIN_ID und YOUR_API_KEY im JavaScript-Code durch Ihre tats?chliche Bin-ID und Ihren API-Schlüssel.

Das ist es! Sie haben einen unterhaltsamen und interaktiven Zuschauerz?hler gebaut. Dies ist eine einfache M?glichkeit, Besucher anzusprechen und Ihrer Website einen Hauch von Pers?nlichkeit zu verleihen.

Schauen Sie sich gerne mein Portfolio an, um es in Aktion zu sehen.

Das obige ist der detaillierte Inhalt vonSo fügen Sie Ihrer Website einen anklickbaren Besucherz?hler hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!