Petua pengoptimuman harta bar kemajuan CSS: kemajuan dan nilai-tutorial css-php.cn

Petua pengoptimuman harta bar kemajuan CSS: kemajuan dan nilai

王林

Lepaskan： 2023-10-26 12:03:23

asal

1945 orang telah melayarinya

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

Kemahiran pengoptimuman atribut bar kemajuan CSS: kemajuan dan nilai

Dalam reka bentuk web moden, bar kemajuan digunakan secara meluas untuk memaparkan kemajuan tugas, kemajuan pemuatan atau menyatakan senario lain yang perlu diukur. CSS menyediakan beberapa sifat dan teknik yang membolehkan kami menyesuaikan gaya dan tingkah laku bar kemajuan dengan lebih fleksibel. Artikel ini akan memperkenalkan dua sifat CSS penting, kemajuan dan nilai, serta menyediakan beberapa contoh kod konkrit. Atribut

progress digunakan untuk menentukan gaya bar kemajuan Kita boleh menukar rupa bar kemajuan dengan mengubah suai nilai atribut. Berikut ialah contoh mudah:

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

Salin selepas log masuk

Kod di atas mentakrifkan bar kemajuan dengan lebar 200px dan ketinggian 20px, dengan jidar bulat dan menggunakan warna jidar kelabu muda. Menjalankan kod ini kita akan melihat bar kemajuan mudah.

Gaya bar kemajuan boleh dilaraskan lagi melalui sifat CSS, termasuk warna latar belakang, warna isian, dsb. Berikut ialah contoh pelarasan gaya khusus bar kemajuan:

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

Salin selepas log masuk

Dalam kod di atas, kami menggunakan ::-webkit-progress-bar dan ::-webkit-progress- value< Pemilih /code> mentakrifkan latar belakang dan warna isian bar kemajuan. Atribut <code>value bar kemajuan mewakili kemajuan semasa dan julat nilai ialah 0 ~ 1. Menjalankan kod ini kita akan melihat bar kemajuan dengan isian biru. ::-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>

Salin selepas log masuk

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

Dengan mengubah suai nilai atribut value, kami boleh menukar kemajuan bar kemajuan secara dinamik. Berikut ialah contoh mudah bar kemajuan dinamik:

rrreee

Kod di atas menggunakan JavaScript untuk mencapai kesan peningkatan nilai kemajuan setiap saat. Dalam pelaksanaan khusus, kami menggunakan fungsi setInterval untuk kerap melaksanakan operasi meningkatkan kemajuan dan menetapkan nilai kemajuan baharu kepada elemen bar kemajuan melalui kaedah setAttribute. Menjalankan kod ini, kita akan melihat bar kemajuan yang berubah secara dinamik. 🎜🎜Di atas ialah pengenalan asas dan contoh kod khusus tentang teknik pengoptimuman harta bar kemajuan CSS. Dengan menggunakan atribut kemajuan dan atribut nilai, kami boleh menyesuaikan dan mengawal gaya dan kemajuan bar kemajuan secara fleksibel, dengan itu membawa lebih banyak kemungkinan kepada reka bentuk web. 🎜

Atas ialah kandungan terperinci Petua pengoptimuman harta bar kemajuan CSS: kemajuan dan nilai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!