froops
@froops

Как сделать прогресс бар с отрезками?

Всем привет! Делаю прогресс-бар для пользователя, но полоса текущего прогресса (зеленого цвета) отображается неправильно. Она должна доставать до необходимого значения. Например, сейчас установлено "$my_reput = 250;", но прогресс показывает только около 50 (примерно). Как это исправить?
// Массив отрезков
	$array_reput = array(
		0 => array('name' => 'name 1', 't_reput' => 0),
		1 => array('name' => 'name 2', 't_reput' => 100),
		2 => array('name' => 'name 3', 't_reput' => 250),
		3 => array('name' => 'name 4', 't_reput' => 500),
		4 => array('name' => 'name 5', 't_reput' => 1000),
		5 => array('name' => 'name 6',  't_reput' => 3000),
	);
	
	// Текущий параметр пользователя (может меняться пользователем)
	$my_reput = 250;
	
	// Максимальное количество параметра "t_reput" (оно всегда в последнем отрезке)
	$key_end_reput = array_key_last($array_reput);
	
	// Вычисляем длину каждого отрезка исходя из их количества
	$width_otr = round(100 / (count($array_reput) - 1));
	
	$div_progres = '';
	
	// На сколько отступать с левого края для текущего отрезка
	$left_text = 0;
	
	foreach($array_reput as $key => $value) {
		
		$div_progres .= '
			<div style="display:inline-block;position: absolute;z-index:3;line-height: 30px;color: #999;left:'.$left_text.'%;border-left:2px solid #FFF;">'.$value['t_reput'].'</div>';
		$left_text += $width_otr;
	}
	
	// Длина выполненного прогресса (100 * мой текущий параметр / максимальный параметр)
	$width = round(100 * $my_reput / $array_reput[$key_end_reput]['t_reput']);
	
	echo '
	<div style="margin:50px auto;max-width:640px;">
	<div>Текущий прогресс: '.$my_reput.'</div>
	<div style="clear:both;height: 20px;background-color: #1f1910;height: 30px;position: relative;border: 1px solid #333333;margin:10px 0;">
		'.$div_progres.'
		<div style="background-color: #058a0c;height: 30px;float: left;border-right: 1px solid #05ae1a;width:'.$width.'%;"></div>
	</div>
	</div>';
  • Вопрос задан
  • 184 просмотра
Решения вопроса 1
ipatiev
@ipatiev Куратор тега PHP
Потомок старинного рода Ипатьевых-Колотитьевых
Задачка, конечно, очень смешная.
И как всегда - на арифметику

Шкала у нас нелинейная, первый шаг 100 единиц, последний - 2000.
Но при этом для вычислений мы берём не позицию шага, а его значение.
Ну и разумеется получаем то, что получаем.
250 от 3000 - это никакие не "примерно 50 единиц", а примерно 8 процентов. Вот эти 8 процентов вам и показывает.

Длина отрезка при разбивке на 5 частей будет 20%
И вот 8 от 20 как раз и составляет те самые "примерно 50" процентов длины первого отрезка :)

Выше товарищ правильно пишет про отладку.
Но отладка в обязательном порядке состоит из двух вещей:
1. Надо понимать, что делает твой код. В частности, иметь представление, какое значение каждая переменная должна иметь на каждом этапе.
2. Запускать код, выводя промежуточные результаты, и сравнивая их с ожидаемыми.

Без п.1 заниматься отладкой бессмысленно.
Именно поэтому для программиста очень важно понимать, как работает его код. Иначе он просто не сможет его отладить.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
dollar
@dollar
Делай добро и бросай его в воду.
Для поиска ошибок в существующем коде нужно заняться его отладкой.
Если совсем не знаешь, с чего начать, то начни с самого понятия отладка.
Ну или жди телепатов.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы