집 > 기사 > 웹 프론트엔드 > 진행 상황에 따라 변경되는 CSS 진행 표시줄 텍스트를 구현하는 방법

진행 상황에 따라 변경되는 CSS 진행 표시줄 텍스트를 구현하는 방법

小云云원래의: 2018-01-11 10:13:352517검색

이 글에서는 진행률에 따라 변경되는 CSS 진행률 표시줄의 텍스트에 대한 샘플 코드를 주로 소개합니다. 또한 진행률에 따라 변경되어야 하는 진행률 표시줄의 텍스트도 소개합니다. 좋습니다. 이제 여러분과 공유하고 참고 자료로 제공하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

요구사항

1. 진행 길이에 따라 진행률 표시줄의 텍스트가 변경되어야 합니다.

Principle

같은 스타일의 두 P를 사용하여 겹치세요

Effect

글꼴은 파란색으로 시작하고 진행률 표시줄이 흰색으로 바뀐 후

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>

진행 상황에 따라 변경되는 CSS 진행 표시줄 텍스트를 구현하는 방법

관련 기사