Heim > Artikel > Web-Frontend > So implementieren Sie CSS-Fortschrittsbalkentext, der sich je nach Fortschritt ändert

So implementieren Sie CSS-Fortschrittsbalkentext, der sich je nach Fortschritt ändert

小云云Original: 2018-01-11 10:13:352496Durchsuche

In diesem Artikel wird hauptsächlich der Text des CSS-Fortschrittsbalkens vorgestellt, der sich entsprechend dem Fortschritt ändert. Außerdem wird der Text im Fortschrittsbalken vorgestellt, der sich entsprechend der Länge des Fortschritts ändern muss ist ziemlich gut. Jetzt werde ich es mit Ihnen teilen und es für Sie als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Anforderungen

1. Der Text im Fortschrittsbalken muss sich entsprechend der Länge des Fortschritts ändern

Prinzip

Verwenden Sie zwei Ps desselben Stils zum Überlappen

Effekt

Die Schriftart beginnt blau und wird anschließend weiß der Fortschrittsbalken

Code

<!DOCTYPE html>
<html lang="cmn-hans">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <script>!function(e,t){function n(){t.body?t.body.style.fontSize=12*o+"px":t.addEventListener("DOMContentLoaded",n)}function d(){var e=i.clientWidth/10;i.style.fontSize=e+"px"}var i=t.documentElement,o=e.devicePixelRatio||1;if(n(),d(),e.addEventListener("resize",d),e.addEventListener("pageshow",function(e){e.persisted&&d()}),o>=2){var a=t.createElement("body"),s=t.createElement("p");s.style.border=".5px solid transparent",a.appendChild(s),i.appendChild(a),1===s.offsetHeight&&i.classList.add("hairlines"),i.removeChild(a)}}(window,document);</script>
    <title>进度条渐变</title>
    <style type="text/css">
        * {
            box-sizing: border-box;
        }
        .box{
            position: fixed;
            left: 50%;
            transform: translate(-50%);
            width: 320px;
            height: 44px;
            background-color: white;
            color: #00a0e9;
            border: 1px solid #00a0e9;
        }
        .process{
            position: absolute;
            height: 100%;
            width: 0;
            background: #00a0e9;
            color: white;
            overflow: hidden;
            z-index: 10;
        }
        .process-text{
            position: absolute;
            left: 160px;
            top: 50%;
            font-size: 12px;
            transform: translate(-50%, -50%);
            white-space: nowrap;
        }
    </style>

    <script>
        function process() {
            var t = 1;
            var max = 320;
            var progress = document.getElementById("process");
            var process_texts = document.getElementsByClassName("process-text");
            var interval = setInterval(function () {
                if (t == max) {
                    clearInterval(interval);
                    for (var i in process_texts){
                        process_texts[i].innerHTML = &#39;完成&#39;
                    }
                } else {
                    progress.style.width = t + "px";
                    for (var i in process_texts){
                        process_texts[i].innerHTML = &#39;进度&#39; + (t / max * 100).toFixed(2) + "%"
                    }
                    t++;
                }
            }, 10)
        }
    </script>

</head>
<body>

<p class="box" onclick="process()">
    <p class="process" id="process">
        <span class="process-text">点击开始</span>
    </p>
    <span class="process-text">点击开始</span>
</p>

</body>
</html>

Verwandte Empfehlungen:

Über PHP-Fortschrittsbalkenfunktion Ein einfaches Beispiel

So implementieren Sie den Fortschrittsbalken zum Laden von JQuery-Webseiten

So verwenden Sie Video- und Audio-Tags und Fortschrittsbalken in H5

Das obige ist der detaillierte Inhalt vonSo implementieren Sie CSS-Fortschrittsbalkentext, der sich je nach Fortschritt ändert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php jquery css

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Mehrere Layoutbeispiele für CSS-WebseitenNächster Artikel：Mehrere Layoutbeispiele für CSS-Webseiten

In Verbindung stehende Artikel

Mehr sehen