suchen

Heim >Web-Frontend >js-Tutorial >Beispielanalyse einer JavaScript-Steuerung des Fortschrittsbalkens

Beispielanalyse einer JavaScript-Steuerung des Fortschrittsbalkens

黄舟
黄舟Original
2017-11-21 11:36:521503Durchsuche

Vor uns haben wir Ihnen gezeigt, wie Sie den Fortschrittsbalken in JavaScript implementieren und den Fortschrittsbalken nativ implementieren. Die von JS zur Steuerung des Fortschrittsbalkens verwendeten Elemente sind relativ einfach. Betten Sie einfach ein Span-Tag in ein p-Tag ein. Die äußere Ebene von p wird als Hintergrund verwendet, und die innere Ebene von span wird für die dynamische Fortschrittsanzeige verwendet von JS.

Der Gesamtcode lautet wie folgt: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>JS控制进度条</title>
    <style type="text/css">
        body
        {
            height:30px;
            width:330px;
            background-color:blue;
        }
        
        #ProgressBarBackgroundOne
        {
            background:url(ProgressBk.png) no-repeat 0 center;
            height:10px;
            width:300px;
        }
        #ProgressBarOne
        {
            background:url(ProgressFt.png) no-repeat 0 center;
            height:10px;
            width:0%;
            display:block;
        }
        
        #ProgressBarBackgroundTwo
        {
            background-color:White;
            height:10px;
            width:300px;
        }
        #ProgressBarTwo
        {
            background-color:Gray;
            height:10px;
            width:0%;
            display:block;
        }
        
    </style>
    <script type="text/javascript">
        var numOne = 0;
        var numTwo = 0;
        function SetProgressOne() {
            var ProgressOne = document.getElementById(&#39;ProgressBarOne&#39;);
            if (numOne < 100) {
                numOne = numOne + 1; 
             }
             ProgressOne.setAttribute(&#39;style&#39;, &#39;width:&#39; + numOne + &#39;%&#39;);
            setTimeout(SetProgressOne, 500);
        }

        function SetProgressTwo() {
            var ProgressTwo = document.getElementById(&#39;ProgressBarTwo&#39;);
            if (numTwo < 100) {
                numTwo = numTwo + 1;
            }
            ProgressTwo.setAttribute(&#39;style&#39;, &#39;width:&#39; + numTwo + &#39;%&#39;);
            setTimeout(SetProgressTwo, 500);
        }
        
    </script>
</head>
<body>
<p id="ProgressBarBackgroundOne"><span id="ProgressBarOne"></span></p>
<p id="ProgressBarBackgroundTwo"><span id="ProgressBarTwo"></span></p>
</body>
<script type="text/javascript">
    SetProgressOne();
    SetProgressTwo();
</script>
</html>

Zur Vereinfachung der Anzeige habe ich den CSS-Text und das JS-Skript direkt in das HTML-Dokument geschrieben Kommen Sie heraus, dies ist die native js-Methode zur Steuerung des Fortschrittsbalkens, und es kann auch mit js-Bibliotheken wie Node.js oder mootools geschrieben werden.

SetProgressOne() verwendet Bilder, um den Fortschritt anzuzeigen; SetProgressTwo() verwendet Farben, um den Fortschritt anzuzeigen. Die Prinzipien sind die gleichen und sie steuern die Attribute von Span-Tags über JS: style="width :Default value %" ist genug. In Bezug auf die Leistung ist die Verwendung von Bildern besser als die Verwendung von Farben, da es schwierig ist, mit abgerundeten Ecken Farben zu verwenden. Das Folgende ist ein Vergleich der Effekte:

Beispielanalyse einer JavaScript-Steuerung des Fortschrittsbalkens

Zusammenfassung:

Durch das detaillierte Studium dieses Artikels glaube ich, dass meine Freunde den Fortschritt der JavaScript-Steuerung besser verstehen bar. Ich hoffe, die Arbeit hilft!

Verwandte Empfehlungen:

Beispiel für die Implementierung der JavaScript-Fortschrittsbalkensteuerung


Einführung in verschiedene Methoden zur Implementierung von Fortschrittsbalken in JavaScript


Nativer JavaScript-Code zur Implementierung des Fortschrittsbalkens

Das obige ist der detaillierte Inhalt vonBeispielanalyse einer JavaScript-Steuerung des Fortschrittsbalkens. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：5 praktische JS-Funktionscode-Schnipsel, die direkt verwendet werden könnenNächster Artikel：5 praktische JS-Funktionscode-Schnipsel, die direkt verwendet werden können

In Verbindung stehende Artikel

Mehr sehen