28.03.2018, 18:06
|
|
Новичок на форуме
|
|
Регистрация: 28.03.2018
Сообщений: 6
|
|
|
Сравнить дату с сегодняшней и поменять стили от ображения даты
Здравствуйте, уважаемые знатоки!
Есть поля дат, заключенные в span, в этих полях уже сохранены даты в формате день.месяц.год (к примеру 28.03.2018)
Вопрос:
Как сравнить все сохраненные даты с сегодняшней и поменять стиль span?
К примеру, если сохраненная дата наступит через 3 дня цвет даты поменять на оранжевый, а если наступит завтра - то на красный?
Спасибо всем за помощь
Последний раз редактировалось saldek, 28.03.2018 в 18:13.
|
|
28.03.2018, 20:37
|
 |
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<span>28.03.2018</span><br>
<span>29.03.2018</span><br>
<span>30.03.2018</span><br>
<span>31.03.2018</span><br>
<span>01.04.2018</span><br>
<span>02.04.2018</span><br>
<script>
var now = Date.now();
[].forEach.call(document.querySelectorAll('span'), function(el){
var date = el.textContent.replace(/(\d+)\.(\d+)\.(\d+)/, '$3,$2,$1');
date = Date.parse(date);
var ost = date - now;
if(ost>86400000*4) el.style.color = '#00ff00';
else if(ost>86400000*3) el.style.color = '#44CC00';
else if(ost>86400000*2) el.style.color = '#77AA00';
else if(ost>86400000) el.style.color = '#DD8800';
else if(ost>0) el.style.color = '#ff7700';
else el.style.color = '#ff0000';
console.log(date);
});
</script>
</body>
</html>
цвета если не подходят сами укажите |
|
28.03.2018, 21:59
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,072
|
|
|
j0hnik,
'$2-$1-$3' так надёжнее!
else if не слишком ли много!
|
|
28.03.2018, 22:08
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,072
|
|
saldek,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<span>28.03.2018</span><br>
<span>29.03.2018</span><br>
<span>30.03.2018</span><br>
<span>31.03.2018</span><br>
<span>01.04.2018</span><br>
<span>02.04.2018</span><br>
<script>
var now = Date.now();
[].forEach.call(document.querySelectorAll('span'), function(el){
var color = ['#ff0000','#ff7700','#DD8800','#77AA00','#44CC00','#00ff00'],
date = el.textContent.replace(/(\d+)\.(\d+)\.(\d+)/, '$2/$1/$3');
date = Date.parse(date);
date = (date - now)/86400000|0||0;
var ost = Math.max(0,Math.min(color.length,date));
el.style.color = color[ost];
});
</script>
</body>
</html>
Последний раз редактировалось рони, 28.03.2018 в 23:35.
|
|
28.03.2018, 22:36
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,072
|
|
|
Сообщение от saldek
|
|
дата наступит через 3 дня цвет даты поменять на оранжевый, а если наступит завтра - то на красный?
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<span>28.03.2018</span><br>
<span>29.03.2018</span><br>
<span>30.03.2018</span><br>
<span>31.03.2018</span><br>
<span>01.04.2018</span><br>
<span>02.04.2018</span><br>
<script>
var color = {1 : 'Red', 3 : 'Orange'},now = new Date();
now.setHours(0, 0, 0, 0);
[].forEach.call(document.querySelectorAll('span'), function(el){
date = el.textContent.replace(/(\d+)\.(\d+)\.(\d+)/, '$2/$1/$3');
date = Date.parse(date);
var ost = (date - now)/86400000|0;
color[ost] && (el.style.color = color[ost]);
});
</script>
</body>
</html>
Последний раз редактировалось рони, 28.03.2018 в 23:34.
|
|
28.03.2018, 23:07
|
|
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
Сообщение от рони
|
j0hnik,
'$2-$1-$3' так надёжнее!
|
 точно не поломается? |
|
28.03.2018, 23:20
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,072
|
|
j0hnik,
проверено мин нет!
|
|
28.03.2018, 23:24
|
|
Новичок на форуме
|
|
Регистрация: 28.03.2018
Сообщений: 6
|
|
|
Очень круто, господа!
Огромное спасибо, вопрос вами раскрыт полностью, премного благодарен. Разберу детально, впредь буду знать и это. Уважаемый j0hnik, в файрфокс 59.0.2 (64-бит) только ваш пример был во все цвета раскрашен, остальные - нет.
Конкретно этот пример |
|
28.03.2018, 23:33
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,072
|
|
|
Сообщение от рони
|
проверено мин нет!
|
 |
|
28.03.2018, 23:36
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,072
|
|
|
saldek,
'$2/$1/$3'
посмотрите примеры выше снова
|
|
|
|
