JavaScript implementiert kreisförmigen Fortschrittsbalkeneffekt

In diesem Artikelbeispiel wird der spezifische JavaScript-Code zur Erzielung des kreisförmigen Fortschrittsbalkeneffekts als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt

<!DOCTYPE html>
<html lang="de">

<Kopf>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-kompatibel" content="IE=edge">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <title>Dokument</title>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <Stil>
    .itemwait{
      Position: absolut;
      oben: 0;
      unten: 0;
      links: 0;
      rechts:0;
      Rand: 0 automatisch; 
    }
    .Fortschritt{
      Strich-Dasharray: 251; 
      Strich-Dashoffset: 0;
      /* 
      stroke-dasharray: gestrichelte Linie stroke-dashoffset: Offset-Intervall*/
    }
  </Stil>
</Kopf>
<Text>
  <svg Breite="200" Höhe="200" Version="1.1" Klasse='itemwait'>
    <circle class='Fortschritt' cx="100" cy="50" r="40" stroke="pink" stroke-width="5" fill="transparent" />
    <text class='text' x="100" y="50" fill='pink' text-anchor='middle' alignment-baseline='middle'>Laden starten</text>
  </svg>
</body>
<Skript asynchron Typ = 'Text/Javascript'>
//js-Code siehe unten</script>

</html>

1. Native JS-Implementierung

const ladenArr = [1,2,10,20,40,70,90,100]
  lass index=0
  var Timer = setzeInterval(()=>{
    let total = document.querySelector('.progress').getTotalLength();
    let Fortschritt = document.querySelector('.progress')
    console.log(Typ von insgesamt)
    progress.style.strokeDashoffset = (Gesamt) * (1-loadingArr[index]/100)
    wenn(index<=loadingArr.length){
      document.querySelector('.text').textContent=`${loadingArr[index]}%`   
  }
    Index++
    wenn(index===loadingArr.length){
      Intervall löschen(Timer)
      document.querySelector('.text').textContent='Laden abgeschlossen'
    }
  },500)

2. jQuery-Implementierung

lass Index = 0
  var $circle = $('.progress');
  var r = $circle.attr('r');
  var Timer = setzeInterval(() => {
    var gesamt = Math.PI * (r * 2);
    var pct = (1-Index / 100) * Gesamt;
    console.log(pct-Typ,pct)
    wenn (Index <= 100) {
      $('.text').text(`${index}%`);
      $circle.css({ strokeDashoffset: pct });
    }
    Index = Index + 10
    wenn (Index > 100) {
      $('.text').text('Laden abgeschlossen');
      Intervall löschen(Timer)
      
    }
  }, 500)

3. Setzen Sie es zunächst nach Ihren eigenen Vorstellungen um

const ladenArr = [1,2,10,20,40,70,90,100]
  lass index=0
  var Timer = setzeInterval(()=>{
    let total = document.querySelector('.progress').getTotalLength();
    let Fortschritt = document.querySelector('.progress')
    console.log(Typ von insgesamt)
    progress.style.strokeDashoffset = (Gesamt) * (1-loadingArr[index]/100)
    $('.text').text(Funktion(){
      wenn(index<=loadingArr.length){
       gibt `${loadingArr[index]}%` zurück
      }
    })
    Index++
    wenn(index===loadingArr.length){
      Intervall löschen(Timer)
      $('.text').text('Laden abgeschlossen')
    }
  },500)

Zusammenfassen

Wissenspunkte: SVG-Zeichnung, JS-native Operation, jQuery

stroke-dasharray: gestrichelte Linie
stroke-dashoffset: Offset-Intervall

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

Mehrere Methoden für den Javascript-Fortschrittsbalken
So implementieren Sie einen Fortschrittsbalken in js
Mit JavaScript lässt sich der Fortschrittsbalken zum Laden einer Webseite ganz einfach erreichen
js Fortschrittsbalken-Implementierungscode
Code-Organisation für die Implementierung des JS-Fortschrittsbalkeneffekts
JS realisiert den Effekt eines kreisförmigen Fortschrittsbalkens (von 0 bis 100 %)
Einfaches Fortschrittsbalken-Steuerelement, geschrieben in Javascript, jquery, css
Fortschrittsbalkeneffekt mit CSS+JS implementiert
js realisiert die Audiosteuerungs-Fortschrittsbalkenfunktion
Verwenden der Sitzung mit Javascript in PHP zum Implementieren der Fortschrittsbalkenfunktion für den Dateiupload

<<: MySQL-Abfrage gibt an, dass das Feld keine Zahl und kein Komma SQL ist

>>: Allgemeine Verwendung von regulären Ausdrücken in MySQL