純前端 - 各種實現進度條-白红宇

純前端 - 各種實現進度條

阅读量：282 次

发布时间：2019-03-01

本文共 4915 字，大约阅读时间需要 16 分钟。

純前端 - 各種實現進度條

進度條是一個非常常見的功能，實現起來也不難，一般我們會用 <div> 來實現。作為一個這麼常見的需求，這篇就要來康康有哪些，以純前端有哪些有意思的方式來實現進度條。

基礎版 - div

這種方法的作法就是以當前 <div> 為容器，以 <div>::before 為內容填充。用 <div> 的好處就是實現簡單，不過缺點就是標籤語義化不高，不容易維護修改。

代碼實現如下：

.process-1 {
    height: 30px;
    width: 300px;
    background-color: #f5f5f5;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
}
.process-1::before {
    counter-reset: progress var(--percent);
    content: counter(progress) '%  ';
    width: calc(300px * var(--percent, 0) / 100);
    display: block;
    height: 30px;
    line-height: 30px;
    font-size: 13px;
    color: #fff;
    background-color: #2486ff;
    text-align: right;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
}
.btn-1 {
    margin-top: 15px;
}

let startTime = (new Date()).getTime();
let currentPercentage = 0;
let maxPercentage = 100;
let countDelay = 50;
let timerId = null;
const percentageChange = () => {
    let currentTime = (new Date()).getTime();
    if (currentTime - startTime >= countDelay) {
        currentPercentage++;
        startTime = (new Date()).getTime();
        document.getElementById("process1").style = `--percent: ${currentPercentage}`;
    }
    if (currentPercentage < maxPercentage) {
        timerId = window.requestAnimationFrame(percentageChange);
    } else {
        window.cancelAnimationFrame(timerId);
    }
};
document.getElementById("btn1").addEventListener('click', percentageChange);

進階版 - input

這種方法是利用了 HTML5 為 <input> 這個標籤提供了 <input range> 這個新的屬性。其中，還要配合 <input step>, <input min>, <input max>, <input value> 進行實現。基本上代碼和 <div> 的實現大同小異。

代碼實現如下：

.process2 {
    display: block;
    height: 20px;
    width: 300px;
    background-color: #2376b7;
}
.btn2 {
    margin-top: 15px;
}

let startTime = (new Date()).getTime();
let currentPercentage = 0;
let maxPercentage = 100;
let countDelay = 50;
let timerId = null;
const percentageChange = () => {
    let currentTime = (new Date()).getTime();
    if (currentTime - startTime >= countDelay) {
        currentPercentage++;
        startTime = (new Date()).getTime();
        document.getElementById("process2").value = currentPercentage;
        document.getElementById("process2").style.background = `linear-gradient(#2376b7 ${currentPercentage}%, #FFF 0%)`;
    }
    if (currentPercentage < maxPercentage) {
        timerId = window.requestAnimationFrame(percentageChange);
    } else {
        window.cancelAnimationFrame(timerId);
    }
};
document.getElementById("btn2").addEventListener('click', percentageChange);

高級版 - progress

除了上述兩種方式模擬以外，當然 whatwg (World Hypertext Application Technology Working Group) 有為我們提供原生的進度條標籤，那就是 <progress>。先來看看實際果：

.process3 {
    display: block;
    width: 300px;
    height: 30px;
    -webkit-appearance: none;
}
.process3::-webkit-progress-bar {
    background-color: gainsboro;
}
.process3::-webkit-progress-value {
    background: linear-gradient(
        -45deg,
        transparent 33%,
        rgba(0, 0, 0, .1) 33%,
        rgba(0,0, 0, .1) 66%,
        transparent 66%
    ),
    linear-gradient(
        to top,
        rgba(255, 255, 255, .25),
        rgba(0, 0, 0, .25)
    ),
    linear-gradient(
        to left,
        #09c,
        #f44
    );
}
.btn3 {
    margin-top: 15px;
}

let startTime = (new Date()).getTime();
let currentPercentage = 0;
let maxPercentage = 100;
let countDelay = 50;
let timerId = null;
const percentageChange = () => {
    let currentTime = (new Date()).getTime();
    if (currentTime - startTime >= countDelay) {
        currentPercentage++;
        startTime = (new Date()).getTime();
        document.getElementById("process3").setAttribute("value", currentPercentage);
    }
    if (currentPercentage < maxPercentage) {
        timerId = window.requestAnimationFrame(percentageChange);
    } else {
        window.cancelAnimationFrame(timerId);
    }
};
document.getElementById("btn3").addEventListener('click', percentageChange);

終極版 - meter

最後介紹也能實現進度條的一種方式，那就是 <meter> 樭籤。直接先看效果：

.process4 {
    display: block;
    width: 300px;
    height: 30px;
}
.btn4 {
    margin-top: 15px;
}

let startTime = (new Date()).getTime();
let currentPercentage = 0;
let maxPercentage = 100;
let countDelay = 50;
let timerId = null;
const percentageChange = () => {
    let currentTime = (new Date()).getTime();
    if (currentTime - startTime >= countDelay) {
        currentPercentage++;
        startTime = (new Date()).getTime();
        document.getElementById("process4").setAttribute("value",currentPercentage);
    }
    if (currentPercentage < maxPercentage) {
        timerId = window.requestAnimationFrame(percentageChange);
    } else {
        window.cancelAnimationFrame(timerId);
    }
};
document.getElementById("btn4").addEventListener('click', percentageChange);

這篇文章介紹了幾種進度條實現方法，從基礎的 <div> 到現代的 <progress> 和 <meter> 樭籤，展示了前端實現進度條的多樣性。每種方法都有其獨特的優缺點，選擇適合的實現方式取決於具体需求。

转载地址：http://zkmo.baihongyu.com/

你可能感兴趣的文章