Maison >interface Web >js tutoriel >Exemple d'analyse de la barre de progression de contrôle JavaScript

Exemple d'analyse de la barre de progression de contrôle JavaScript

黄舟original: 2017-11-21 11:36:521503parcourir

Avant nous, nous vous avons présenté comment implémenter la barre de progression en JavaScript et implémenter la barre de progression de manière native. Alors comment contrôler la barre de progression ? Les éléments utilisés par JS pour contrôler la barre de progression sont relativement simples. Il suffit d'intégrer une balise span dans une balise p. La couche externe de p est utilisée comme arrière-plan et la couche interne de span est utilisée pour l'affichage dynamique de la progression, qui est contrôlée. par JS.

Le code global est le suivant :

<!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>

Pour faciliter l'affichage, j'ai écrit le texte css et le script js directement dans le document html Sortez, c'est la manière native de js de contrôler la barre de progression, et elle peut également être écrite à l'aide de bibliothèques js telles que Node.js ou mootools.

SetProgressOne() utilise des images pour afficher la progression ; SetProgressTwo() utilise des couleurs pour afficher la progression. Les principes sont les mêmes, et ils contrôlent tous les attributs de la balise span via JS : style="width : Valeur par défaut. %" suffit. En termes de performances, il est préférable d'utiliser des images plutôt que des couleurs, car il est difficile d'utiliser des couleurs pour gérer les coins arrondis. Tous les navigateurs ne prennent pas en charge l'attribut CSS arrondis. Voici une comparaison des effets :

<.> Exemple danalyse de la barre de progression de contrôle JavaScript

Résumé :

Grâce à l'étude détaillée de cet article, je pense que mes amis ont une meilleure compréhension de la barre de progression du contrôle JavaScript . J'espère que vous pourrez travailler aide !

Recommandations associées :

Exemple d'implémentation du contrôle de la barre de progression JavaScript

Introduction à plusieurs méthodes d'implémentation des barres de progression en JavaScript

Code natif JavaScript pour implémenter la barre de progression

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：5 extraits de code de fonction JS pratiques qui peuvent être utilisés directementArticle suivant：5 extraits de code de fonction JS pratiques qui peuvent être utilisés directement

Articles Liés

Voir plus