JS - serienedteller

kekkzor · 30. mars 2020

Hei.

Sitter på hjemmekontor og prøver å lære meg litt JS, i denne omgang en countdowntimer som går i serie, med et pauseintervall mellom hver serie.

Når det er pause skal det dukke opp en grønn boks, med nedtelling til når pausen er over.
Det meste fungerer fint, bortsett fra pauseskjermene etter den første. De teller ikke ned.

<!DOCTYPE html>
<html lang="no">

  <meta charset="UTF-8">
  <meta http-equiv="Content-Type" content="text/html">
  
  <!--  Meta  -->
  
  <title>Nedteller!</title>
  
  <!--  Styles  -->
  <link rel="stylesheet" href="style.css">
  
  <!--  Scripts  -->
  <script src="scripts.js"></script> 

  </head>
  
  <body> 
  <div id="divWrap">
  	
			
		<div class="set" id="start" onclick="initCountdown(1,2,0);">	
			START!! <div id="i-nummer"></div>
		</div> 	

<!-- 1 -->  
  	<div class="set">
	  	<strong>1:</strong>
	  	<div id="divCountdown" name="sett">
--:--:--	  	  
	  	</div>
	  </div>

		<!-- PAUSE -->	  
		<div class="set" id="pause"><strong>PAUSE</strong><br>
		<div id="divCountdown" name="sett">	</div></div>


<!-- 2 -->  	
  	<div class="set">
			<strong>2:</strong>
			<div id="divCountdown" name="sett">
--:--:-- 
			</div>
		</div>
		
		<!-- PAUSE -->	  
		<div class="set" id="pause"><strong>PAUSE</strong><br>
		<div id="divCountdown" name="sett">	</div></div>

<!-- 3 -->			
  	<div class="set">
			<strong>3:</strong>
			<div id="divCountdown" name="sett">
--:--:-- 
			</div>
		</div>
		
		<!-- PAUSE -->	  
		<div class="set" id="pause"><strong>PAUSE</strong><br>
		<div id="divCountdown" name="sett">	</div></div>

<!-- 4 -->			
  	<div class="set">
			<strong>4:</strong>
			<div id="divCountdown" name="sett">
--:--:-- 
			</div>
		</div>	
  	
  </div>
  
  </body>
</html>


//////////////
//NEDTELLER
//////////////
function initCountdown(e,p,i){

var min,sec,hundre,secExt,hundreExt,startTimer,i;
var divCountdown = document.getElementById("divCountdown");

var hvilketSett = document.getElementsByName("sett");
var antallSett = document.getElementsByName("sett").length;

//SETT-tider
	min = (Math.floor(e/60) == 0)?0:Math.floor(e/60);
	sec = (e%60==0)?0:(e - 60*min);
	hundre = 0;
	
//PAUSE-tid
	minP = (Math.floor(p/60) == 0)?0:Math.floor(p/60);
	secP = (p%60==0)?0:(p - 60*min);
	hundreP = 0;


startTimer = setInterval(startCountdown,10);
   	
function startCountdown(){
	hundre = hundre - 1;
	
	//NÅR NEDTELLING TREFFER 0
	if(hundre == 0 && sec == 0 && min == 0) {
		i = ++i;
		
		if(i%2 != 1){
			document.getElementById("pause").style.visibility = "hidden";
		}
					
	//SETT-tider
		min = (Math.floor(e/60) == 0)?0:Math.floor(e/60);
		sec = (e%60==0)?0:(e - 60*min);
		hundre = 0;


	//PAUSE-tid
		minP = (Math.floor(p/60) == 0)?0:Math.floor(p/60);
		secP = (p%60==0)?0:(p - 60*min);
		hundreP = 0;
		
		//VIS PAUSESKJERM
		if (i%2 == 1 && i < antallSett){
			document.getElementById("pause").style.visibility = "visible";
			min = minP;
			sec = secP;
			hundre = hundreP;
			alert(i + ":" + antallSett);
		};
		
		
		//STOPP NÅR ANTALL SETT ER NÅDD
		if (i == antallSett){			
			clearInterval(startTimer);	
		} else {
			startCountdown();
		}
	} 
	
	else if (hundre < 0 && sec > 0) {
		sec = sec - 1;
		hundre = 99;
	} 
	
	else if (hundre < 0 && sec == 0 && min > 0){
		min = min - 1;
		sec = 59;
		hundre = 99;
	}

   	
   	//TELL NED	 	
	// LEGG TIL UTJEVNINGSNULLER I NEDTELLING	
	secExt = (sec < 10)?"0" + sec:sec;
	
	if (hundre == 1) {
		hundreExt = "00";
	} else if (hundre < 10) {
		hundreExt = "0" + hundre; 
	} else {
		hundreExt = hundre;
	}
	
	if(i == antallSett){ 
		alert("FERDIG!"); 
		location.reload();
	} else {	
	hvilketSett[i].innerHTML = i + ":" + antallSett + "-" + min + ":" + secExt + ":" + hundreExt;
	}
 }
}

.set{
width: 400px;
font-size: 50px;
margin-bottom: 15px;
}

#start{
border: 5px solid black;
background-color: #ce4a4e;
cursor: pointer;
}

#divWrap{
padding: 5px;
text-align: center;
border: 5px solid black;
font-family: courier;
}


.divCountdown{
display: block;
width: 75%;
height: 75%;
font-size: 100px;
text-align: center;
border: 5px solid black;
font-family: courier;
cursor: auto;
}

#pause{
visibility: hidden;
position: absolute;
font-size: 100px;
text-align: center;
padding-top: 30px;
top: 100px;
left: 100px;
width: 75%;
height: 75%;
background-color: green;
opacity: 0.9;
}

Mistenker at det har noe med innerHTML som ikke skriver over det som stod i boksen fra forrige pause?

Noen der ute som kan se hva som er feil?

Endret 30. mars 2020 av kekkzor

Logg inn

JS - serienedteller

Anbefalte innlegg

kekkzor

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer