Maison > Article > interface Web > Conseils d'optimisation des propriétés de la barre de progression CSS : progression et valeur

Conseils d'optimisation des propriétés de la barre de progression CSS : progression et valeur

王林original: 2023-10-26 12:03:231877parcourir

CSS 进度条属性优化技巧：progress 和 value

Compétences d'optimisation des attributs de la barre de progression CSS : progression et valeur

Dans la conception Web moderne, les barres de progression sont largement utilisées pour afficher la progression des tâches, la progression du chargement ou exprimer d'autres scénarios qui doivent être mesurés. CSS fournit certaines propriétés et techniques qui nous permettent de personnaliser le style et le comportement de la barre de progression de manière plus flexible. Cet article présentera deux propriétés CSS importantes, progress et value, et fournira quelques exemples de code concrets. L'attribut

progress est utilisé pour définir le style de la barre de progression. Nous pouvons changer l'apparence de la barre de progression en modifiant la valeur de l'attribut. Voici un exemple simple :

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 定义进度条样式 */
        progress {
            width: 200px;
            height: 20px;
            border: 1px solid #ccc;
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <progress></progress>
</body>
</html>

Le code ci-dessus définit une barre de progression d'une largeur de 200px et d'une hauteur de 20px, avec une bordure arrondie, et utilise une couleur de bordure gris clair. En exécutant ce code, nous verrons une simple barre de progression.

Le style de la barre de progression peut être ajusté davantage via les propriétés CSS, notamment la couleur d'arrière-plan, la couleur de remplissage, etc. Voici un exemple d'ajustement de style spécifique de la barre de progression :

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 定义进度条样式 */
        progress {
            width: 200px;
            height: 20px;
            border: 1px solid #ccc;
            border-radius: 10px;
        }
        /* 调整进度条的背景颜色 */
        progress::-webkit-progress-bar {
            background-color: #eee;
        }
        /* 调整进度条的填充颜色 */
        progress::-webkit-progress-value {
            background-color: #007bff;
        }
    </style>
</head>
<body>
    <!-- 这里的 value 属性表示进度条的当前值，取值范围为 0 ~ 1 -->
    <progress value="0.5"></progress>
</body>
</html>

Dans le code ci-dessus, nous utilisons ::-webkit-progress-bar et ::-webkit-progress- value définit la couleur d'arrière-plan et de remplissage de la barre de progression. L'attribut <code>value de la barre de progression représente la progression actuelle et la plage de valeurs est comprise entre 0 et 1. Exécutez ce code et nous verrons une barre de progression avec un remplissage bleu. ::-webkit-progress-bar 和 ::-webkit-progress-value 选择器定义了进度条的背景和填充颜色。进度条的 value 属性表示当前进度，取值范围为 0 ~ 1。运行该代码，我们将看到一个带有蓝色填充的进度条。

通过修改 value 属性的值，我们可以动态地改变进度条的进度。下面是一个简单的动态进度条示例：

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 定义进度条样式 */
        progress {
            width: 200px;
            height: 20px;
            border: 1px solid #ccc;
            border-radius: 10px;
        }
        /* 调整进度条的背景颜色 */
        progress::-webkit-progress-bar {
            background-color: #eee;
        }
        /* 调整进度条的填充颜色 */
        progress::-webkit-progress-value {
            background-color: #007bff;
        }
    </style>
    <script>
        setInterval(function(){
            // 获取进度条元素
            var progressBar = document.querySelector('progress');
            // 获取当前进度
            var value = parseFloat(progressBar.getAttribute('value'));
            // 增加进度值
            value += 0.1;
            // 判断是否达到最大值，超过 1 后重置为 0
            if(value > 1) {
                value = 0;
            }
            // 设置新的进度值
            progressBar.setAttribute('value', value.toString());
        }, 1000);
    </script>
</head>
<body>
    <progress value="0"></progress>
</body>
</html>

上面的代码通过 JavaScript 实现了一个每秒钟增加进度值的效果。具体实现中，我们使用 setInterval 函数来定时执行增加进度的操作，并将新的进度值通过 setAttribute

En modifiant la valeur de l'attribut value, nous pouvons modifier dynamiquement la progression de la barre de progression. Voici un exemple simple de barre de progression dynamique :

rrreee

Le code ci-dessus utilise JavaScript pour obtenir un effet d'augmentation de la valeur de progression chaque seconde. Dans l'implémentation spécifique, nous utilisons la fonction setInterval pour effectuer régulièrement l'opération d'augmentation de la progression et définir la nouvelle valeur de progression sur l'élément de la barre de progression via la méthode setAttribute. En exécutant ce code, nous verrons une barre de progression changeant dynamiquement. 🎜🎜Ce qui précède est une introduction de base aux techniques d'optimisation des propriétés de la barre de progression CSS et des exemples de code spécifiques. En utilisant l'attribut progress et l'attribut value, nous pouvons personnaliser et contrôler de manière flexible le style et la progression de la barre de progression, offrant ainsi plus de possibilités à la conception Web. 🎜

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!

JavaScript css webkit 选择器

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：Propriétés de pseudo-classe dynamique CSS : survol, actif et focusArticle suivant：Propriétés de pseudo-classe dynamique CSS : survol, actif et focus

Articles Liés

Voir plus