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)ZusammenfassenWissenspunkte: SVG-Zeichnung, JS-native Operation, jQuery
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:
|
<<: MySQL-Abfrage gibt an, dass das Feld keine Zahl und kein Komma SQL ist
>>: Allgemeine Verwendung von regulären Ausdrücken in MySQL
Artikel empfehlen
Eine kurze Analyse und Aufschlüsselung der Vor- und Nachteile von drei Baumstrukturtabellendesigns in MySQL
Inhaltsverzeichnis Einführung Frage Design 1: Adj...
Vollständiges Installations- und Konfigurations-Tutorialdiagramm für das komprimierte MySQL 8.0.22-Paket (getestet und effektiv)
1. Laden Sie das Zip-Installationspaket herunter ...
Detaillierte Schritte zur Installation der dekomprimierten Version von MySQL 5.7.20 (zwei Methoden)
Ich werde die Installation von MySQL unter Window...
Meta-Tags einfach erklärt
Der META-Tag, umgangssprachlich auch als Tag beze...
Details zur Datenanzeige der Vue3-Listenschnittstelle
Inhaltsverzeichnis 1. Beispiel für die Anzeige de...
CSS3 implementiert horizontale Zentrierung, vertikale Zentrierung, horizontale und vertikale Zentrierung Beispielcode
Als Front-End-Affe werden wir, sei es während ein...
Einfache Schritte zum Konfigurieren des Nginx-Reverse-Proxys mit SSL
Vorwort Ein Reverse-Proxy ist ein Server, der übe...
Detaillierte Erklärung, wie Node.js mit ES6-Modulen umgeht
Inhaltsverzeichnis 1. Unterschiede zwischen den b...
MySQL-Abfrageoptimierung: Eine Tabellenoptimierungslösung für 1 Million Daten
1. Abfragegeschwindigkeit von zwei Abfrage-Engine...
Klassifizierung der Farbeigenschaften von Webseiten
Klassifizierung der Farbeigenschaften Jede Farbe ...
Vue zeigt dynamisch den Wochentag an, der dem Datum entsprechend dem ausgewählten Monat entspricht
Wir, die bescheidenen Programmierer, müssen immer...
Statische IP-Konfigurationsmethode für die Centos8-Brücke in der virtuellen VMware-Maschine
1. Stellen Sie sicher, dass die Netzwerkverbindun...
Lösen Sie das Problem ungültiger UTF8-Einstellungen in MySQL 5.6
Nach der Dekomprimierung der grünen Version von m...
Eine kurze Diskussion über Lösungen zum Stören von CSS3-Animationen
Warum steckt es fest? Es gibt eine Prämisse, die ...
So verwenden Sie Nginx als Load Balancer für MySQL
Hinweis: Die Nginx-Version muss 1.9 oder höher se...