Quero criar um menu que a cada dia um dos links muda o estilo usando a mesma data do computador...
Exemplo de javascript:
function _getDateEnd ($element) {
var date = new Date($element.getAttribute('data-end'));
return !isNaN(date) ? date : new Date();
}
function _timePad (n) {
return n < 10 ? '0' + n : n;
}
function _timeLeft (now, end) {
if (now <= end) {
var seconds = parseInt((end - now) / 1000, 10),
minutes = parseInt(seconds / 60, 10),
hours = parseInt(minutes / 60, 10),
days = parseInt(hours / 24, 10),
left = '';
seconds = seconds - (minutes * 60);
minutes = minutes - (hours * 60);
hours = hours - (days * 24);
left += (days && days > 1) ? days + ' dias, ' : (days === 1 ? '1 dia, ' : '');
left += (toString(hours).length) ? hours + 'h ' : '';
left += (toString(minutes).length) ? _timePad(minutes) + 'm ' : '';
left += _timePad(seconds) + 's';
if (days + hours + minutes + seconds > 0) {
return left;
} else {
return 'Tempo esgotado!!!!';
}
} else {
return 'Tempo esgotado!!!!';
}
}
function timeCounter ($elements) {
$elements.forEach(function ($each) {
$each.innerHTML = _timeLeft(new Date(), _getDateEnd($each));
});
}
var $counters = [].slice.call(document.querySelectorAll('.counter'));
timeCounter($counters);
setInterval(function () {
timeCounter($counters);
}, 1000);
body {
background: #000000;
color: #dddddd;
}
#menu {
width: 200px;
}
#menu li {
list-style: none;
}
#menu li a {
width: 100%;
background: #006699;
color: #ffffff;
border: 2px solid #000000;
text-decoration: none;
display: block;
padding: 6px;
font-size: 20px;
}
#menu li a:hover {
text-decoration: none;
background: #00dddd;
color: #000000;
}
#menu li.diafuturo a{
background: #112244;
color: #999999;
}
#menu li.diafuturo a:hover{
background: #112244;
color: #999999;
}
#menu li.diaatual a{
background: #990000;
color: #000000;
}
#menu li.diaatual a:hover{
background: #ffc000;
color: #000000;
}
<div id="menu">
<ul>
<li class="diapassado"><a href="#">09/07/2019</a></li>
<li class="diapassado"><a href="#">10/07/2019</a></li>
<li class="diaatual"><a href="#">11/07/2019</a></li>
<li class="diafuturo"><a href="#">12/07/2019</a></li>
<li class="diafuturo"><a href="#">13/07/2019</a></li>
</ul>
</div>
<br/>
Exemplo de javascript: <span class='counter' data-end='2029-06-05T12:01:48.561Z'></span>
Resumindo eu tava procurando uma forma de destacar um link do menu automaticamente usando um javascript parecido, se alguém puder ajudar eu agradeço, obs sou iniciante em js