Vinnaren i pepparkakshustävlingen!
  1. Dator och IT
  2. Systemutveckling
  3. Webbutveckling och javascript

js countdown

Svara
2018-01-23, 13:31
  #1
Worldnature
Medlem
Worldnatures avatar
Kod: 
var timeleft = 20;
var downloadTimer = setInterval(function(){
timeleft--;
document.getElementById("countdowntimer").textContent = timeleft;
if(timeleft <= 0)
clearInterval(downloadTimer);
},1000);

Det är så att jag vill få min countdown timer att räkna ner från 20 till 0 vilket jag har gjort. Men när man väl svarar på första frågan t.ex så vill jag att räknaren ska börja om på 20 ner till 0 och inte fortsätta på t.ex 15 sekunder om det var då man klickade på första svaret.

Är rätt ny på JS så hade uppskattat om någon har lust att hjälpa mig med detta.
Citera
2018-01-23, 14:18
  #2
Diverge
Medlem
Diverges avatar
Det är så att jag vill få min countdown timer att räkna ner från 20 till 0 vilket jag har gjort. Men när man väl svarar på första frågan t.ex så vill jag att räknaren ska börja om på 20 ner till 0 och inte fortsätta på t.ex 15 sekunder om det var då man klickade på första svaret.
[/quote]

Du får helt enkelt resetta timeleft till 20 när du klickar på svaret, vad det nu innebär.
Citera
2018-01-23, 14:26
  #3
Worldnature
Medlem
Worldnatures avatar
Citat:
Ursprungligen postat av Diverge
Det är så att jag vill få min countdown timer att räkna ner från 20 till 0 vilket jag har gjort. Men när man väl svarar på första frågan t.ex så vill jag att räknaren ska börja om på 20 ner till 0 och inte fortsätta på t.ex 15 sekunder om det var då man klickade på första svaret.

Du får helt enkelt resetta timeleft till 20 när du klickar på svaret, vad det nu innebär.[/quote]


Kod: 
if(timeleft <= 0)
har ändrat den till

Kod: 
if(timeleft <= 20)
med men fungerar inte, den räknar inte ner då från 20 ens. timern står still.
Citera
2018-01-23, 16:09
  #4
Diverge
Medlem
Diverges avatar
Näe, du missförstår mig.
Funktionen som hanterar klicket på svaret måste ge variabeln timeleft ett nytt värde, dvs 20.
Citera
2018-01-23, 18:39
  #5
Worldnature
Medlem
Worldnatures avatar
Citat:
Ursprungligen postat av Diverge
Näe, du missförstår mig.
Funktionen som hanterar klicket på svaret måste ge variabeln timeleft ett nytt värde, dvs 20.

ja, det har jag förstått, men vet bara inte hur jag ska få till det riktigt.
Citera
2018-01-23, 20:12
  #6
Nich
Medlem
Citat:
Ursprungligen postat av Worldnature
ja, det har jag förstått, men vet bara inte hur jag ska få till det riktigt.

Du kan lägga till en eventListener som lyssnar efter ett klick. Vid klick återställer du bara värdet. Något sådant:

Kod:
<span id="countdown"></span>

    <button id="button">Knapp!</button>

    <script>

        let start = 20;
        let timeLeft = start;
        window.onload = resetTimer();

        let timer = setInterval( function() {

            timeLeft--;
            document.getElementById( 'countdown' ).textContent = timeLeft;

            if( timeLeft == 0 ) {

                clearInterval( timer );
                alert( "Tiden tog slut!" );

            }

        }, 1000 );

        function resetTimer() {
            timeLeft = start;
            document.getElementById( 'countdown' ).textContent = start;

        }

        document.getElementById( 'button' ).addEventListener( 'click', resetTimer );



    </script> 

Se fiddle.
Citera
2018-01-23, 23:13
  #7
Povel
Medlem
Povels avatar
[quote=Nich|63007810]Du kan lägga till en eventListener som lyssnar efter ett klick. Vid klick återställer du bara värdet. Något sådant:

Kod:
[.....]
      window.onload = resetTimer();
  [.....] 

Ovanstående är kod som "fungerar" av andra skäl än vad du nog tänker dig. Du hade kunnat skriva bara `resetTimer();` på den där raden (ledtråd: din funktion "resetTimer" returnerar inte någonting).

/p
Citera
Svara

Stöd Flashback

Flashback finansieras genom donationer från våra medlemmar och besökare. Det är med hjälp av dig vi kan fortsätta erbjuda en fri samhällsdebatt. Tack för ditt stöd!

Stöd Flashback