Вывести оставшееся время в виде шкалы?

Question

[Люба]

Добрый день подскажите как сделать оставшееся время до окончания действия обявления как на авито в виде шкалы ?
У меня выводится вот этим кодом фото номер 2.

$ost = floor((strtotime($row_Recordset1['data1'])-time())/(24*60*60));
			if($ost>0)
                echo '<br><font color=green>Осталось '.$ost.' дн.</font>';
			elseif($ost==0)
                echo '<br>Последний день';
			elseif($ost<0)
				{
				if (!$row_Recordset1['activ'])
                    echo '<br><font color=red>Просрочено</font>';
				elseif(!$row_Recordset1['moder'])
					{
					echo '<br><font color=orange>В архиве</font>';

Answer 1

[Алексей Скляров]

Тут простая арифметика, плюс <progress>:
<progress max="100" value="25"> </progress>
Ваша же задача вместо max подставить общее кол-во дней, вместо 25 подставить количество оставшихся дней. Однако я бы лучше перевел все в проценты и в процентах выводил.

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

Пример: https://jsfiddle.net/oLnyzLc2/

Comments

[Люба]

Можете подробнее рассказать как с biv вывести с утра мучаюсь не выходит?

Само объявление у меня подается на 30 дней первые 10 дней зеленые вторые 10 дней оранжевые последние 10 дней красные.
Пытаюсь сделать так но не работает.

[Алексей Скляров]

Люба, так я ведь вам указал пример, там написано все. Насколько я понимаю у вас проблемы уже именно с серверной частью.

[Люба]

Алексей Скляров, не выходит сделать где то ошибка посмотрите пожалуйста что не так, сам код работает но показывает не верно.

вот сам код my-files.ru/shfh51
С prodres я пробовала все работает а вот с этим кодом не хочет.
А вот с этим работает

if($ost>0){
              echo '<br><progress class="time" max="30" value="'.$ost.'"></progress>';
              }

Answer 2

[Игорь]

А что если воспользоваться тегом <progress> и задать нужное значение? Я бы попробовал.

Comments

[Люба]

можете подробнее написать как его применить ?

[Игорь]

Люба, данный тег используется в такой форме:

<progress value="" max=""></progress>

Соответственно, в value ставим текущее количество дней, а в max начальное, то есть максимальное. С PHP пока слабо знаком, только изучаю, поэтому с подстановкой помочь не смогу. Цвет, полоски, насколько знаю, можно поменять с помощью стиля:

<progress max="100" value="35" style="background-color:#000000;"></progress>

Может быть, есть более простой метод. Написал, что знал.

[Люба]

Игорь, спасибо только как это все применить к моему коду ?

[Люба]

Игорь, сделала вот так

if($ost>0){
              echo '<br><progress class="progress" max="30" value="'.$ost.'"></progress>';
               }

вроде работает но как задать стили он не реагируют на изменения ?

[Люба]

и можно ли сделать три цвета зеленый,оранжевый,и красный в конце срока скажем за 10 дней до окончания срока ?

[Игорь]

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

if($ost>0 && $ost<10){
              echo '<br><progress style="background-color:#цвет;" max="30" value="'.$ost.'"></progress>';
               }

Я так понимаю, что #ost - это количество дней (ну, вообщем, думаю, суть ясна, просто добавить дополнительные условия). Возможно, изменения не происходят из-за того, что совпадают имена у тега и класса. В конечном итоге можно вообще через id обратиться к элементу.

[Игорь]

Ну и соответственно, если дней больше десяти, например, то прописать в стилях другой цвет.

[Игорь]

Еще хотел бы добавить, что в каждом браузере цвет полосы меняется по-разному. Цвета фона полосы и самой полосы также меняются отдельно. Поэтому, если очень важна кроссбраузерность, следует воспользоваться способом, который написали выше: div в процентном соотношении.

[Люба]

Игорь, спасибо может ещё есть какой способ вывести шкалу кроме этого ?

[Игорь]

Люба, насколько знаю, кроме этих двух способов других нормальных нет. Тогда стоит воспользоваться div, который будет расширяться или сокращаться по мере времени, - реализовать это несложно, я думаю, и отображаться во всех браузерах будет одинаково. Хороший пример использования div написал человек выше.

[Люба]

Игорь, пробую с div но не выходит с утра мучаюсь ((

echo '<div class="progressBlock"></div>';
                echo '<br><div class="percent">Осталось '.$ost.' дн.</div>';
                echo '</div>';
				 {
				
        $color = "lime";
        if ($ost > 2 and $ost < 10) $color = "yellow";
        if ($ost <= 2) $color = "red";
        echo "background-color: $color;";
        $last = 10;
        $total = 50;
        $p = $last * 30 / $total;
        echo "width: $p%;";
  
	  }

[Игорь]

Люба, а что конкретно не работает? Я, к сожалению, увидеть не могу, так как данные зависят от сервера. Не работают стили? Или вообще механика?

[Игорь]

Люба, в самом начале кода лишний закрывающий тег div. А вообще, в кусочном виде да и с моими пока малыми познаниями PHP очень сложно что-то путное подсказать.

[Люба]

@ReD_DiamonD, механика код что в скобках у меня объявление подаётся на 30 дней мне нужно сделать 10 дней зелёный цвет, 10 дней жёлтый , 10 дней красный