Diskuze: Datum vol. 2

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

Qestin

Člen

Qestin:16.11.2016 16:55

Dobrý den,

chtěl bych se ještě zeptat. Je možné vzít všechny elementy co mají třídu "time" vložit je do pole, vyhledat je pomocí ".getElementsByClassName", přidat jim třídu "odd/even" podle toho jestli je sudý nebo lichý. Celé toto provést s cyklem "while" nebo "foreach"? Děkuji za odpověď.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <script>
            function zjistiDatum(dnyNavic) {
                var konecneDatum = new Date();
                konecneDatum.setDate(konecneDatum.getDate() + dnyNavic);
                return konecneDatum.getDate() + '. ' + (konecneDatum.getMonth() + 1) + '. ' + konecneDatum.getFullYear();
            }
            document.write('<div class="time1">Dnes je: ' + zjistiDatum(0) + '</div>');
            document.write('<div class="time2">Zítra bude: ' + zjistiDatum(1) + '</div>');
            document.write('<div class="time3">Pozítří bude: ' + zjistiDatum(2) + '</div>');
        </script>
    </body>
</html>

Odpovědět

16.11.2016 16:55

Qestin

Člen

Qestin:16.11.2016 17:11

Ptám se kvůli tomu, protože tohle nejde zobrazit na sraších prohlížečích.

Nahoru Odpovědět

16.11.2016 17:11

Michal

Člen

Michal:16.11.2016 17:22

Na toto se nejlépe hodí cyklus for:

/** Tento selektor vybere všechny divy s třídou „time“. */
// var elementy = document.getElementsByClassName('time');

/** Tento selektor vybere všechny divy, jejichž třída začíná na „time“. */
var elementy = document.querySelectorAll('div[class^="time"]');

for(var i = 0, l = elementy.length; i < l; i++) {
   var trida = i % 2 === 0 ? 'even' : 'odd';
   elementy[i].className = elementy[i].className + ' ' + trida;
}

Nahoru Odpovědět

16.11.2016 17:22

Qestin

Člen

Qestin:17.11.2016 22:47

Potřeboval bych, aby v souboru:
1.) "index.html" byl řádek, který bude vypadat nějak takto "<div class="time1">Dnes je: ' + zjistiDatum(0) + '</div>"
2.) "style.css"zústalo, tak jak je

div:nth-of-type(even) {
   color: red;
}

div:nth-of-type(odd) {
   color: blue;
}

3.) "skript.js" zde, aby zůstala ta fuknce, kterou tu již mám, ale plus i toto a vše dohromady to fungovalo?

Děkuji za odpověď.
Hlavně bych chtěl poděkovat uživateli Oxtimus, který mi stále odpovídá. :-)

Nahoru Odpovědět

17.11.2016 22:47

Michal

Člen

Michal:18.11.2016 12:36

Podle toho, jak to popisuješ, by to mohlo vypadat třeba takto (živá ukázka)

index.html
Je důležité nezapomenout nalinkovat externí soubory css a js.

...
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
...
<div class="time1">Dnes je: </div>
<div class="time2">Zítra bude: </div>
<div class="time3">Pozítří bude: </div>
...

style.css
Jak píšeš podobu css souboru, pak to funguje i bez JavaScriptu (jen jsem nezjišťoval, na jak starých prohlížečích). JavaScript s :nth-of-child vůbec nepracuje, ten jenom přiřadí třídy .even a .odd, které je třeba také nastylovat.

div:nth-of-type(even), .even {
   color: red;
}

div:nth-of-type(odd), .odd {
   color: blue;
}

script.js
Funkce vypisData a obarviData by klidně mohly být spojené v jednu, protože se procházejí stejné prvky tím stejným cyklem. Já je pro jednoduchost ale rozdělil.

window.onload = function() {
   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;
   }
}

Nahoru Odpovědět

18.11.2016 12:36

Qestin

Člen

Qestin:18.11.2016 12:37

Tak já jsem to nakonec vyřešil následovně:

"scripts.js"

 window.onload = function() {
    var elements = document.getElementsByClassName("time");
    console.log(elements.length);

    for (var i = 0, l = elements.length; i < l; i++) {
       var trida = i % 2 === 0 ? 'even' : 'odd';
       elements[i].className = elements[i].className + ' ' + trida;

       elements[i].innerHTML = elements[i].innerHTML + findDate(i);
    }

    function findDate(days) {
           var date = new Date();
           date.setDate(date.getDate() + days);
           var result = date.getDate() + '. ' + (date.getMonth() + 1) + '. ' + date.getFullYear();
               console.log(result);
           return result;
        }
};

"index.html"

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <script language="javascripts" type="text/javascript" src="scripts.js"></script>
    </head>
    <body>
        <div class="time">Dnes je: </div>
        <div class="time">Zítra bude: </div>
        <div class="time">Pozítří bude: </div>
    </body>
</html>

"style.css"

.even {
   color: red;
}

.odd {
   color: blue;
}

Nahoru Odpovědět

18.11.2016 12:37

Qestin

Člen

Qestin:18.11.2016 12:39

Víš jak tohle samé udělat v "php"?

Nahoru Odpovědět

18.11.2016 12:39

Michal

Člen

Michal:18.11.2016 12:54

To vlastně nebude nic jiného:

index.php:

<?php
function zjistiDatum($dniNavic) {
   return date('d. m. Y', strtotime('+' . $dniNavic . ' days'));
}

$hlasky = ['Dnes je:', 'Zítra bude:', 'Pozítří bude:'];

for($i = 0, $l = count($hlasky); $i < $l; $i++) {
   $trida = $i % 2 === 0 ? 'even' : 'odd';
   echo '<div class="' . $trida . '">' . $hlasky[$i] . ' ' . zjistiDatum($i) . '</div>';
}
?>

Editováno 18.11.2016 12:54

Akceptované řešení
+20 Zkušeností
+2,50 Kč

Nahoru Odpovědět

18.11.2016 12:54

Qestin

Člen

Qestin:18.11.2016 13:01

To je jen takhle krátký? Hm, tak to je paráda díky.

Nahoru Odpovědět

18.11.2016 13:01

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 9 zpráv z 9.