Как сделать диаграмму прогресса с помощью jQuery?

Опубликовано: 1 Декабря, 2021

Предположим, вы готовите табличные данные по определенным данным. Таким образом, столбчатая диаграмма используется для графического представления данных для лучшего наглядного представления. Данные могут варьироваться от возраста группы людей до определенного диапазона, оценок студента по определенному предмету.

Подход: мы будем создавать индикатор выполнения HTML, начальное значение которого составляет 10%. Мы создадим индикатор выполнения в различных цветах и узорах. Затем мы будем создавать код JavaScript для индикатора выполнения.

Код реализации:

HTML

  
<!DOCTYPE html>
 < html lang = "en" >
 
< head >
    < meta charset = "UTF-8" >
    < meta name = "viewport" content =
        "width=device-width, initial-scale=1.0" >
 
    < style >
        .bar {
            width: 500px;
            height: 80px;
            background-color: aquamarine;
            border-radius: 100px;
            display: flex;
            align-items: center;
        }
 
        .progress {
            width: 467px;
            width: 50px;
            height: 50px;
            background-color: grey;
            border-radius: 100px;
            margin-left: 17px;
        }
 
        .percentage {
            position: absolute;
            margin-left: 30px;
            font-weight: bold;
        }
 
        input {
            margin-bottom: 30px;
        }
    </ style >
 </ head >
 
< body >
    < h3 >
        Enter a number between 1
        and 100 for progress
    </ h3 >
 
    < input type = "number" min = "0" max = "100" >
     
    < div class = "bar" >
        < div class = "progress" >
        </ div >
        < div class = "percentage" >0%</ div >
    </ div >
 
    < script >
        const input = document.querySelector('input');
        const progress = document.querySelector('.progress');
        const percentage = document.querySelector('.percentage');
        console.log(progress)
        let percentComplete = 0;
 
        input.onchange = function () {
            percentComplete = input.value
            console.log(percentComplete);
             
            progress.style.width =
                `${percentComplete / 100 * 417 + 50}px`;
 
            percentage.innerHTML = `${percentComplete}%`;
        };
    </ script >
 </ body >
 
</ html > 

Выход:

Technical Scripter Вопросы о Web технологиях JQuery Picked HTML CSS-Misc HTML-Misc CSS

Как сделать диаграмму прогресса с помощью jQuery?

HTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ