Gå til innhold

kekkzor

Medlemmer
 Vis profil  Se deres aktivitet

  • Innlegg

    2

  • Ble med

  • Besøkte siden sist

 Innholdstype 

Innlegg skrevet av kekkzor

  1. JS - serienedteller

    i Programmering og webutvikling

    Skrevet · Endret av kekkzor

    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?

×
×
  • Opprett ny...