FINÁLNÍ VÝPRODEJ KREDITŮ na ITnetwork je tady. Využij poslední šanci a získej až 80 % extra kreditů ZDARMA na náš interaktivní e-learning. Zjisti více:
NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
Avatar
Qestin
Člen
Avatar
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í ".getElementsBy­ClassName", 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
Avatar
Qestin
Člen
Avatar
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
Avatar
Michal
Člen
Avatar
Odpovídá na Qestin
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
Avatar
Qestin
Člen
Avatar
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
Avatar
Michal
Člen
Avatar
Odpovídá na Qestin
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
Avatar
Qestin
Člen
Avatar
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
Avatar
Qestin
Člen
Avatar
Qestin:18.11.2016 12:39

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

 
Nahoru Odpovědět
18.11.2016 12:39
Avatar
Michal
Člen
Avatar
Odpovídá na Qestin
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
Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
 
Nahoru Odpovědět
18.11.2016 12:54
Avatar
Qestin
Člen
Avatar
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.