CSS プログレスバーのプロパティ最適化のヒント: 進行状況と値-CSSチュートリアル-php.cn

CSS プログレスバーのプロパティ最適化のヒント: 進行状況と値

王林

リリース： 2023-10-26 12:03:23

オリジナル

1940 人が閲覧しました

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

CSS プログレスバー属性の最適化スキル: 進行状況と値

現代の Web デザインでは、プログレスバーはタスクの進行状況、読み込みの進行状況、またはエクスプレスの表示に広く使用されています。測定が必要なその他のシナリオ。 CSS は、プログレスバーのスタイルと動作をより柔軟にカスタマイズできるようにするいくつかのプロパティとテクニックを提供します。この記事では、2 つの重要な CSS プロパティ、progress と value を紹介し、いくつかの具体的なコード例を示します。

プログレス属性は、プログレスバーのスタイルを定義するために使用されます。属性値を変更することで、プログレスバーの外観を変更できます。簡単な例を次に示します。

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

ログイン後にコピー

上記のコードは、幅 200 ピクセル、高さ 20 ピクセル、丸い境界線を持つプログレスバーを定義し、明るい灰色の境界線の色を使用します。このコードを実行すると、単純な進行状況バーが表示されます。

進行状況バーのスタイルは、背景色、塗りつぶし色などの CSS プロパティを使用してさらに調整できます。以下は、進行状況バーの特定のスタイル調整の例です。

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

ログイン後にコピー

上記のコードでは、::-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 を使用して、進行状況の値が 1 秒ごとに増加する効果を実現します。特定の実装では、setInterval 関数を使用して進行状況を増加させる操作を定期的に実行し、setAttribute メソッドを通じて新しい進行状況値を進行状況バー要素に設定します。このコードを実行すると、動的に変化する進行状況バーが表示されます。

上記は、CSS プログレスバープロパティの最適化手法と具体的なコード例の基本的な紹介です。 progress 属性と value 属性を活用することで、プログレスバーのスタイルや進行状況を柔軟にカスタマイズおよび制御でき、Web デザインにさらなる可能性をもたらします。

以上がCSS プログレスバーのプロパティ最適化のヒント: 進行状況と値の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。