JSFiddle - React, Tailwind, and code Playground
HTML
<div class="time1">Dnes je: </div>
<div class="time2">Zítra bude: </div>
<div class="time3">Pozítří bude: </div>
CSS
/** :nth-of-type funguje bez JavaScriptu, pro JavaScript jsou zde třídy „.even“ a „.odd“. */
div:nth-of-type(even), .even {
color: red;
}
div:nth-of-type(odd), .odd {
color: blue;
}
JavaScript
vypisData(); // Zde se celý proces vypsání dat spustí.
obarviData(); // Zde se spustí proces obarvení sudých a lichých dat.
/**
* Najde všechny <div> s třídou začínající na „time“ a doplní do nich příslušný datum.
*/
function vypisData() {
var elementy = document.querySelectorAll('div[class^=time]');
for(var i = 0, l = elementy.length; i < l; i++) {
elementy[i].innerHTML += zjistiDatum(i);
}
}
/**
* Vrátí datum za několik dní dle parametru dnyNavic.
* @param {Number} dnyNavic Počet dní, které se připočtou k aktuálnímu datu.
* @returns {String} Výsledný datum ve formátu DD. MM. YYYY.
*/
function zjistiDatum(dnyNavic) {
var konecneDatum = new Date();
konecneDatum.setDate(konecneDatum.getDate() + dnyNavic);
return konecneDatum.getDate() + '. ' + (konecneDatum.getMonth() + 1) + '. ' + konecneDatum.getFullYear();
}
/**
* Najde všechny <div> s třídou začínající na „time“ a přidá jim CSS třídu podle toho, zda jsou liché nebo sudé.
*/
function obarviData() {
var elementy = document.querySelectorAll('div[class^=time]');
for(var i = 0, l = elementy.length; i < l; i++) {
var trida = i % 2 === 0 ? 'odd' : 'even';
elementy[i].className = elementy[i].className + ' ' + trida;
}
}