K
Kiwi_gamer01
New member
- Beiträge
- 1
- Punkte Reaktionen
- 0
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);
function work(argument) {
var counter = 45;
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("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>