Beispielanalyse einer JavaScript-Steuerung des Fortschrittsbalkens-js-Tutorial-php.cn

Beispielanalyse einer JavaScript-Steuerung des Fortschrittsbalkens

黄舟

Freigeben： 2017-11-21 11:36:52

Original

1508 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!