NOVINKA - Online rekvalifikační kurz Python programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: Ztučnění písma po určitém intervalu

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

Jak se ti líbí článek?
Před uložením hodnocení, popiš prosím autorovi, co je špatněZnaků 0 z 50-500
Jak se ti kurz líbí?
Tvé hodnocení kurzuZnaků 0 z 50-500
Aktivity
Avatar
Ondřej Musil
Člen
Avatar
Ondřej Musil:15.4.2018 21:14

Ahoj!

Momentálně si lámu hlavu nad tím, jak v JavaScriptu (jQuery) udělat skript, který by fungoval následovně:
-> Mám text, řekněme že vypadá takto: Test / Baf / Chleb. A potřeboval bych udělat to, aby se každý dvě sekundy zvýraznilo jiné slovo. Takže by to vypadalo následovně: Test / Baf / Chleba --> Test / Baf / Chleba --> Test / Baf / Chleba
Zkoušel jsem to udělat přes funkci .each, ale nemohu nastavit interval, zkoušel jsem to přes delay. Dokázal by mi někdo pomoc? Byl bych moc vděčný, díky! :)

Editováno 15.4.2018 21:15
Odpovědět
15.4.2018 21:14
A bug is never just a mistake. It represents something bigger. An error of thinking that makes you who you are.
Avatar
VitekST
Člen
Avatar
Odpovídá na Ondřej Musil
VitekST:16.4.2018 6:09

Jaké výsledky přinesly funkce setTimeout či setInterval?

 
Nahoru Odpovědět
16.4.2018 6:09
Avatar
Matúš Olejník
Člen
Avatar
Odpovídá na Ondřej Musil
Matúš Olejník:16.4.2018 8:30

V JS som úplný začiatočník ale postupnými krokmi som sa dopracoval k tomuto :) hádam tu budú iné jednoduchšie a elegantnejšie spôsoby, ale zatiaľ aspoň niečo :)

<!DOCTYPE html>
<html>
<body>

<div id="divId">
    aaa / bbb / ccc / ddd
</div>

<script>
    var x = 0;

    function start(){
        setInterval(function () {return changeText(x++);}, 2000);
    }

    function changeText(index){
        var words = getTextFromDiv().split("/");
        var result = "";

        for(var i = 0; i < words.length; i++){
            if(i == index)
                words[i] = "<b>" + words[i] + "</b>";

            result += words[i];

            if(i != words.length - 1)
                result += "/";
        }
        document.getElementById("divId").innerHTML = result;
        if(x == words.length){
            x = 0;
        }
    }

    //get text from element without HTML
    function getTextFromDiv() {
        var element = document.getElementById('divId');
        return element.innerText || element.textContent;
    }

   start();
</script>

</body>
</html>
Nahoru Odpovědět
16.4.2018 8:30
/* I am not sure why this works but it fixes the problem */
Avatar
Ondřej Musil
Člen
Avatar
Ondřej Musil:16.4.2018 23:04

Já to dělal nějak takhle.

$(document).ready(function(i) {

        for(var i=1;i<5;i++) {
                $("#main-section-text-"+i).delay(i*1000).queue(function(){
                        $(this).addClass("foo").delay(5000).removeClass("foo");

                });
        }


})

Ale nemůžu přijít na to, proč mi nejde postupně odstranit tu třídu. Byl bych rád za každou radu. :)

Nahoru Odpovědět
16.4.2018 23:04
A bug is never just a mistake. It represents something bigger. An error of thinking that makes you who you are.
Avatar
Martin Konečný (pavelco1998)
Tvůrce
Avatar
Odpovídá na Ondřej Musil
Martin Konečný (pavelco1998):16.4.2018 23:15

Já osobně bych to řešil asi nějak takto :D

<span data-index="0">Test</span> /
<span data-index="1">Baf</span> /
<span data-index="2">Chléb</span>

<script>

var currentIndex = 0;
var maxIndex = 2;

var interval = window.setInterval(function() {
        $("span[data-index]").each(function() {
                $(this).removeClass("foo");
        });

        $("span[data-index='" + currentIndex + "']").addClass("foo");

        currentIndex++;

        if (currentIndex > maxIndex) {
                window.clearInterval(interval);
        }
}, 2000);

</script>
Editováno 16.4.2018 23:16
Nahoru Odpovědět
16.4.2018 23:15
Aktuálně připravuji browser RPG, FB stránka - https://www.facebook.com/AlteiraCZ
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Neaktivní uživatel:17.4.2018 0:55

To vypada jako docela zabavna vec.

<div id='wrapper'>
  <span class='foo' data-index="0">Test</span> /
  <span data-index="1">Baf</span> /
  <span data-index="2">Chléb</span>
</div>

<script>
  setInterval((wrapper => () => {
    (selected => {
      selected.removeAttribute('class');
      (selected
        .nextElementSibling || wrapper.firstElementChild).setAttribute('class', 'foo')
    })(wrapper.querySelector('.foo'))
  })(document.getElementById('wrapper')), 500);
</script>

Kod neberte vazne, jen pro pobaveni.
Vychazel jsem z reseni Martin Konečný (pavelco1998)

Editováno 17.4.2018 0:56
Nahoru Odpovědět
17.4.2018 0:55
Neaktivní uživatelský účet
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 6 zpráv z 6.