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

JavaScript JavaScript Ztučnění písma po určitém intervalu American English version English version

Aktivity (1)
Avatar
Ondřej Musil
Člen
Avatar
Ondřej Musil:15. dubna 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. dubna 21:15
Odpovědět 15. dubna 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. dubna 6:09

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

 
Nahoru Odpovědět 16. dubna 6:09
Avatar
Matúš Olejník
Člen
Avatar
Odpovídá na Ondřej Musil
Matúš Olejník:16. dubna 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. dubna 8:30
/* I am not sure why this works but it fixes the problem */
Avatar
Ondřej Musil
Člen
Avatar
Ondřej Musil:16. dubna 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. dubna 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)
Redaktor
Avatar
Odpovídá na Ondřej Musil
Martin Konečný (pavelco1998):16. dubna 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. dubna 23:16
Nahoru Odpovědět 16. dubna 23:15
Aktuálně připravuji browser RPG, FB stránka - https://www.facebook.com/AlteiraCZ
Avatar
Taskkill
Redaktor
Avatar
Taskkill:17. dubna 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. dubna 0:56
 
Nahoru Odpovědět 17. dubna 0:55
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.