Разделите 100 на равные проценты в JavaScript

ОК. Я постараюсь как можно лучше объяснить свой случай.

По сути, у меня здесь есть эта функция, которая добавит приращение к моей панели выполнения начальной загрузки:

function progress(increment) {
  f = parseInt(document.getElementsByClassName('progress-bar')[0].style.width);
  document.getElementsByClassName('progress-bar')[0].style.width = (f + increment) +'%';
}

Теперь для каждого шага, например, есть 6 шагов, я должен постепенно разделить 100 на 6 шагов.

Например, если мы находимся на шаге 1: 100 / 6 = 16.67 each, значит, 16.67 нужно добавлять постепенно.

Так было бы так:

Step 1: Add 16.67
Step 2: Add 33.34
Step 3: Add 50.01
---- and the list go on

Итак, в моей программе есть переменные ff:

   let current_step = 0;
   let stepCount = 6

Итак, если я использовал функцию прогресса, я попытался разделить 100 на stepCount на current_step:

progress(100 / (stepCount - current_step)

Но это не решило проблему, и я получаю только странные цифры.

Есть идеи, какая здесь правильная формула, чтобы получить правильные числа для добавления на полосу выполнения?

PS. Извините, я надеюсь, что это не так запутано. Я попытался объяснить это как можно лучше.

100 * (current_step / stepCount), так что вы идете к 100 равными шагами. В противном случае вы просто разделите на 6, затем на 5, затем на 4 и т. д.
VLAZ 09.04.2021 15:52
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
25
1

Ответы 1

Ваш расчет неверен. Это должно дать вам правильное значение.

progress((100 / stepCount) * current_step);

function progress(value) {
    document.getElementsByClassName('progress-bar')[0].style.width = `${value}%`;
}

или ты можешь сделать это вот так

progress(100 / stepCount);

function progress(increment) {
    let f = +document.querySelector('.progress-bar')[0].style.width.slice(0, -1);
    // I'm slicing the width to remove the `%`
    document.getElementsByClassName('progress-bar')[0].style.width = `${f + increment}%`;
}

Другие вопросы по теме