Кодирование динамического PHP css базирующийся индикатор выполнения - проблема процента математики

Question

Кодирование динамического PHP css базирующийся индикатор выполнения - проблема процента математики

Я кодирую индикатор выполнения PHP, который обновит себя через число процента, которое дано ему, но у меня есть проблемы, разрабатывающие проценты.

Мой код в настоящее время следующие:

PHP

$percent = $_GET['percent'];

if($percent < 5)
    //low-image.jpg

elseif($percent > 95)
   //high-image.jpg

else{
$lowpercent = 100 - $percent;

$highwidth = 270/100 * $percent;
$lowwidth = 270/100 * $lowpercent;

HTML

<div class="first"></div>
<div class="mid-first" style="width:<?=$highwidth?>px;"></div>
<div class="mid-second" style="width:<?=$lowwidth?>px;"></div>
<div class="last"></div>

CSS

.first. mid-first, .mid-second, .last{
    display:block;
    float:left;
    height:62px;
    }
.first{
    background:url(low.png);
    width:31px;
}
.mid-first{
    background:url(mid-first.png) repeat-x;
}
.mid-second{
    background:url(mid-second.png);
}
.last{
    background:url(high.png);
    width:32px;
}

проблема

В данный момент проценты разработаны немного неправильно, мой мозг математики, кажется, был неуместен сегодня...

Есть 4 отделения, первое и последнее отделение поднимают 5% каждый так 10%, средние отделения тогда равняются другим 90%.

Это означает, когда рисунок 50 дан, передал на пути $ _GET , это разработает 50% средних баров не включая 5%-й первый бар, который неправ, это должно принять первые 5% во внимание и затем разработать 50% пиксельных ширин?

Как я могу изменить математику позади процента, чтобы зафиксировать два средних бара так, чтобы, когда 50% применяется, оба средних бара были равны в пикселях?

0

добавлено 09 Январь 2013 в 06:31 автор Dan отредактировано 03 Январь 2015 в 09:24

Просмотры: 21

источник

nl ja de

@Blazemonger that' s положительная сторона

добавлено 09 Январь 2013 в 06:44, автор Dan, источник

Первые вещи сначала: "математика" всегда исключительна. У британцев есть он неправильно.;-)

добавлено 09 Январь 2013 в 06:40, автор Blazemonger, источник

Во-вторых: почему вы преобразовываете их в пиксели вообще? Используйте проценты в CSS и спасите себе вычисление.

добавлено 09 Январь 2013 в 06:41, автор Blazemonger, источник

3 ответы

Видеокурс по Java для начинающих

Получи видеокурс по Java для начинающих с упражнениями

Нет никакого серьезного основания использовать пиксели вообще. Оберните свои отделения в содержании отделения и используйте проценты в вашем CSS.

PHP:

$lowpercent = 100 - $percent;

HTML:

<div class="barwrapper">
    <div class="first"></div>
    <div class="mid-first" style="width:<?=($percent-5)?>px;"></div>
    <div class="mid-second" style="width:<?=($lowpercent-5)?>px;"></div>
    <div class="last"></div>
</div>

CSS:

.first{
    background:url(low.png);
    width:5%;
}
.last{
    background:url(high.png);
    width:5%;
}

OR, if you don't want first and last to be taken away from the 100%:

<div class="first"></div>
<div class="barwrapper">
    <div class="mid-first" style="width:<?=($percent)?>px;"></div>
    <div class="mid-second" style="width:<?=($lowpercent)?>px;"></div>
</div>
<div class="last"></div>

CSS:

.first{
    background:url(low.png);
    width:30px;
}
.last{
    background:url(high.png);
    width:30px;
}

1

добавлено 09 Январь 2013 в 06:46 автор Blazemonger

источник

Это работает, но проблема - первое отделение, всегда 5%, таким образом, я должен разработать два процента, приняв это во внимание?

добавлено 09 Январь 2013 в 07:12, автор Dan, источник

.first и. в последний раз за пределами индикатора выполнения. Если индикатор выполнения предназначается, чтобы быть 50%, то $percent = 50; , что означает, HTML был бы width:50%; , но первая секция всегда - 5%, таким образом, это тренируется в 55% / 50%.

добавлено 09 Январь 2013 в 07:21, автор Dan, источник

I' m не ясный, что вы имеете в виду. <Кодируют> .first и .last часть 100%-го индикатора выполнения, или они за пределами бара?

добавлено 09 Январь 2013 в 07:15, автор Blazemonger, источник

Хорошо, затем используйте HTML, подобный моему второму подходу, так, чтобы только .mid-сначала и , .mid-второй , был в .barwrapper .

добавлено 09 Январь 2013 в 07:22, автор Blazemonger, источник

Видеокурс "Создание приложений для Android"

Получи множество видеоуроков по Android сейчас

Инструменты успешного делегирования

Автор: Евгений Попов

автор Adder · Answer 1 · 2013-01-09T06:35Z

Необходимо преобразовать $highwidth и $lowwidth к целым числам прежде, чем написать им в CSS или HTML. Поскольку это, они - числа с плавающей точкой.

Я думаю, что это могло бы работать:

$percent = $_GET['percent'];

if($percent < 5)
    //low-image.jpg

elseif($percent > 95)
   //high-image.jpg

else{
    $highwidth = intval(270/90 * ($percent-5));
    $lowwidth = 270 - $highwidth;
}

автор MJA · Answer 2 · 2013-01-09T06:41Z

Необходимо преобразовать ширину в целое число, поскольку это может также быть плавающая точка, и можно вычислить ширину 2-го бара просто substracting 1-я барная ширина от общего количества.

// We have already used 10 percents, so let's substract them
$percent = $percent - 10;

// We can't have negative percents, right?
if ($percent < 0) $percent = 0;

// Calculate 1st bar
$highwidth = (int) 270/100 * $percent;

// 100% - 1st bar = 2nd bar
$lowwidth = 270 - $highwidth;