Wie implementieren Sie eine Front-End-Fortschrittsleiste mit Ringeffekt und Eingabeaufforderung mit Maus?

Erstellen Sie eine coole Front-End-Fortschrittsleiste: Ringeffekt und Mausaufforderungen

Die Implementierung der Front-End-Fortschrittsleiste erscheint einfach, aber es erfordert einige Fähigkeiten, um sowohl die Ästhetik als auch die Funktionalität zu berücksichtigen. In diesem Artikel wird untersucht, wie Sie eine benutzerdefinierte Fortschrittsleiste mit einem Ringeffekt und einer Mausover -Eingabeaufforderung erstellen.

Zunächst müssen wir eine Fortschrittsleiste mit einem Kernelement implementieren, das einen Mittelring und eine Mausover -Eingabeaufforderung enthält. In diesem Artikel wird rein native JavaScript, CSS und HTML verwendet, anstatt sich auf bestimmte UI -Frameworks zu verlassen, um eine größere Flexibilität zu bieten.

Herausforderungen und Lösungen

1. Implementierung des Ringeffekts: Das Einfügen von Knoten direkt in vorhandene Komponenten kann Kompatibilitätsprobleme oder Einschränkungen aufweisen. Daher haben wir uns entschieden, den Ring durch den CSS -Stil und die HTML -Struktur zu bauen.

2. Maus -Hover -Eingabeaufforderung: Dies erfordert die Verwendung von JavaScript, um auf mousemove -Ereignisse zu hören und Eingabeaufforderungsinformationen dynamisch zu generieren oder zu aktualisieren.

Implementierungsschritte und Code Beispiele

1. HTML -Struktur: Erstellen Sie einen Container mit Fortschrittsbalken und Ringen.

<div class="progress-container">
  <div class="progress-bar"></div>
  <div class="progress-circle"></div>
</div>

2. CSS -Stil: Definiert den Stil von Fortschrittsbalken, Ringen und Behältern.

 .Progress-Container {
  Breite: 200px; /* einstellbare Breite*/
  Höhe: 20px;
  Hintergrundfarbe: #f0f0f0;
  Position: Relativ; /* Referenz für absolut positionierte Ringe*///
}

.Progress-Bar {
  Höhe: 100%;
  Hintergrundfarbe: #4caf50; /* Anpassbare Farben*/
}

.Progress-Circle {
  Breite: 15px; /* Ringgröße*/
  Höhe: 15px;
  Hintergrundfarbe: weiß;
  Grenze: 2PX Solid #4CAF50;
  Grenzradius: 50%;
  Position: absolut;
  Rechts: 0; /* Ringposition*/
  Oben: 2.5px; /* Vertikale Zentrierung von Anpassung*//
}

3. JavaScript Dynamic Update: Verwenden Sie JavaScript, um die Fortschrittsbalkenbreite dynamisch anzupassen und Mausereignisse zu verarbeiten.

 const progressBar = document.querySelector ('. Progress-bar');
const progresorContainer = document.querySelector ('. Fortschrittskontainer');
Sei Fortschritt = 0; // anfängliche Fortschrittsfunktion updateProgress (newProgress) {
  progress = math.min (100, math.max (0, newProgress)); // Stellen Sie sicher, dass der Fortschritt zwischen 0 und 100 ProgressBar.Style.width = `$ {Progress}%`;
}

ProgressContainer.AdDeVentListener ('Mousemove', (e) => {
  const rect = progresorContainer.getBoundingClientRect ();
  const x = e.clientx - rect.left;
  const CalculedProgress = (x / rect.width) * 100;
  UpdateProgress (CalculedProgress); // Echtzeit-Update-Fortschritt // Eingabeaufforderungsinformationen anzeigen (Sie können die Tooltip-Bibliothek oder das benutzerdefinierte Eingabeaufforderung verwenden)
  const tOoltip = document.createelement ('div');
  Tooltip.ClassList.Add ('Tooltip');
  Tooltip.TextContent = `$ {calculedProgress.toFixed (0)}%`;
  Tooltip.Style.left = `$ {x} px`;
  Tooltip.Style.top = `$ {rect.bottom 5} px`; // Eingabeaufforderung Box Standort document.body.AppendChild (Tooltip);
});


progresorContainer.addeventListener ('Mouseout', () => {
  // Entfernen Sie die Eingabeaufforderung zur Meldung const tooltip = document.querySelector ('. Tooltip');
  if (Tooltip) {
    document.body.removechild (Tooltip);
  }
});

// Beispiel: simulieren Fortschrittsänderungen setInterval (() => {
  UpdateProgress (Fortschritt 5);
}, 1000); // den Fortschritt um 5% pro Sekunde um 5% erhöhen

Denken Sie daran, den Tooltip -Stil hinzuzufügen:

 .tooltip {
  Position: absolut;
  Hintergrundfarbe: #333;
  Farbe: weiß;
  Polsterung: 5px 10px;
  Border-Radius: 5px;
  Opazität: 0,9;
  Zeiger-Events: Keine; /* Verhindern Sie Mausverschlussereignisse*//
}

Dieser Code implementiert die grundlegenden Fortschrittsbalken- und Ring -Effekte sowie Fortschrittsaktualisierungen und Aufforderungsinformationen, wenn sich die Maus bewegt. Sie können den CSS -Stil und die JavaScript -Logik entsprechend den tatsächlichen Anforderungen anpassen, z. B. Animationseffekte, raffiniertere Eingabeaufforderungsinformationen usw. Denken Sie daran, dass eine bessere Benutzererfahrung eine ausgereiftere Tooltip -Bibliothek für eine bessere Nutzung in Betracht ziehen, um Eingabeaufforderungsinformationen zu verarbeiten.

Das obige ist der detaillierte Inhalt vonWie implementieren Sie eine Front-End-Fortschrittsleiste mit Ringeffekt und Eingabeaufforderung mit Maus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!