Auf Thema antworten

Beitrag

[QUOTE="Kiwi_gamer01, post: 8360, member: 1838"]
Mein Code zeigt einen angehenden Intervaltimer. Als "Countdown" nutze ich set Interval nun kommt bei mir aber die frage auf wie kann ich diesen stoppen?

[HTML]<!DOCTYPE html>
<html>
	<head>
		<title>Interval Timer</title>
	
		<style>
			@font-face {
				font-family: sevenSegment;
				src: url(SevenSegment.ttf);
			}
		
			h1{
				font-family: sevenSegment;
				font-size: 7em;
				color: #969696;
				line-height: 0%;
			}
			h2{
				font-family: sevenSegment;
				font-size: 5em;
				color: #969696;
				line-height: 0%;
			}

.container{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50% );
			}
			
			.button1{
				font-family: sevenSegment;
				font-size: 1em;
				color: #969696;
				
  				border: none;
			}
		</style>

</head>
	<body>
		<div class="container">

<table>
			  <tr>
			  	<td><h2 id="des">WORK</h2></td>			    
			  </tr>
			  <tr>
			    <td><h1 id="count">00:00:45</h1></th>
			  </tr>
			  <tr>
			  	<td><h2 id="des">REST</h2></td>
			   </tr>
			  <tr>
			    <td><h1 id="count2">00:00:15</h1></td>
			  </tr>
			   <tr>
			   	 <td><h2 id="des">Pause</h2></td>
			   </tr>
			   <tr>
			     <td><h1 id="count3">00:00:25</h1></td>
			   </tr>
			</table>
			<button class="button1" type="button" id="work">Work</button>
			<button class="button1" type="button" id="rest">Rest</button>
			<button class="button1" type="button" id="pause">Pause</button>
		</div>
		<script type="text/javascript">

document.querySelector('#work').addEventListener('click', work);
			document.querySelector('#rest').addEventListener('click', rest);
			document.querySelector('#pause').addEventListener('click', pause);

if (counter >= 10) {
						id = document.getElementById("count");
						id.innerHTML = "00:00:" + counter + "";
						if (counter <= 0) {
							ende(id);
						}
					}
					if (counter < 10){
						id = document.getElementById("count");
						id.innerHTML = "00:00:0" + counter + "";
						if (counter <= 0) {
							ende(id);
						}
					}

}, 1000);
			}
			function rest(argument) {
				var counter = 15;
				var status = 0;
	/*			function ende(argument) {
					
					if (){
						counter = 15;
					}
					if (){
						counter = 45;
					}
					if (){
						counter = 25;
					}
					if (){
						counter = "mal sehen";
					}
				}*/
				setInterval( function(){
					counter--;

if (counter >= 10) {
						id = document.getElementById("count2");
						id.innerHTML = "00:00:" + counter + "";
						if (counter <= 0) {
							ende(id);
						}
					}
					if (counter < 10){
						id = document.getElementById("count2");
						id.innerHTML = "00:00:0" + counter + "";
						if (counter <= 0) {
							ende(id);
						}
					}

}, 1000);
			}
			function pause(argument) {
				var counter = 25;
				var status = 0;
	/*			function ende(argument) {
					
					if (){
						counter = 15;
					}
					if (){
						counter = 45;
					}
					if (){
						counter = 25;
					}
					if (){
						counter = "mal sehen";
					}
				}*/
				setInterval( function(){
					counter--;

if (counter >= 10) {
						id = document.getElementById("count3");
						id.innerHTML = "00:00:" + counter + "";
						if (counter <= 0) {
							ende(id);
						}
					}
					if (counter < 10){
						id = document.getElementById("count3");
						id.innerHTML = "00:00:0" + counter + "";
						if (counter <= 0) {
							ende(id);
						}
					}

}, 1000);
			}
			function ende(id){
				id.innerHTML = "00:00:00"
			}
		</script>
	</body>
</html>[/HTML]
[/QUOTE]

Authentifizierung