ZitatJa ich habe das ganze jetzt 5x hintereinander
Ich nehme an, das bedeutet, dass Du auch die Funktion TimerUnter 5x hast und jedes Mal timerspezifisch angepasst hast? Wenn Du es so hast und keine Erweiterungen zu erwarten sind, ist es ja gut, aber es wäre kein Problem gewesen, diese Funktion so ändern, dass eine einzige beliebig viele Timer verwalten kann.
genau so ist es aktuell 
Nur das die Timer unterschiedlich heißen 
Aber ich bin gern für vorschläge offen Man kann ja nur dazu lernen
ZitatAber ich bin gern für vorschläge offen
Wenn das so ist: Ich habe das Ganze etwas überarbeitet, so dass man eine Funktion für beliebig viele Timer verwenden kann. Die Statusvariablen onload und isChecked wegrationalisiert. Ich finde es so wesentlich übersichtlicher.
<div id="timer1">
<div class="toggle text">
<label style="left: -1.5em;"> Unter
<input type="checkbox" class="unter" value="90"> <span class="slider"></span>
</label>
</div>
<br>
<div class="countdown">
<div class="tiles color-full"></div>
</div>
</div>
<div id="timer2">
<div class="toggle text">
<label style="left: -1.5em;"> Unter
<input type="checkbox" class="unter" value="180"> <span class="slider"></span>
</label>
</div>
<br>
<div class="countdown">
<div class="tiles color-full"></div>
</div>
</div>
<!-- Beliebig viele weitere HTML-Bloecke fuer Timer anlegen -->
<script>
function Timer(id) {
// Timervariable fuer das setInterval
var thetimer;
var container = document.getElementById(id);
var thecb = container.querySelector('.unter');
thecb.addEventListener('click', timerUnter);
var thetiles = container.querySelector('.tiles');
var target_date = localStorage.getItem('target_date-' + id);
var time_limit;
if (target_date) {
// Endezeit vorhanden: Zeitdifferenz berechnen
time_limit = target_date - Date.now();
// Timer starten
setTimeout(
function () {
//alert( 'done' );
}, time_limit);
doCountdown();
// Timer starten
thetimer = setInterval(doCountdown, 1000);
thecb.checked = true;
}
function doCountdown() {
var days, hours, minutes, seconds; // variables for time units
var countdown = thetiles; // get tag element
// find the amount of "seconds" between now and target
var seconds_left = (target_date - Date.now()) / 1000;
if (seconds_left >= 0) {
console.log(time_limit);
if ((seconds_left * 1000) < (time_limit / 2)) {
thetiles.classList.remove("color-full");
thetiles.classList.add("color-half");
}
if ((seconds_left * 1000) < (time_limit / 4)) {
thetiles.classList.remove("color-half");
thetiles.classList.add("color-empty");
}
days = pad(parseInt(seconds_left / 86400));
seconds_left = seconds_left % 86400;
hours = pad(parseInt(seconds_left / 3600));
seconds_left = seconds_left % 3600;
minutes = pad(parseInt(seconds_left / 60));
seconds = pad(parseInt(seconds_left % 60));
// format countdown string + set tag value
countdown.innerHTML = "<span>" + hours + ":</span><span>" + minutes + ":</span><span>" + seconds + "</span>";
}
}
function pad(n) {
return (n < 10 ? '0' : '') + n;
}
function timerUnter(event) {
if (this.checked) {
var minutes = this.value;
var time_limit = minutes * 60 * 1000;
target_date = Date.now() + time_limit; // set the countdown date
// Laufzeit in den Localstorage eintragen
localStorage.setItem('target_date-' + id, target_date);
//set actual timer
setTimeout(
function () {
//alert( 'done' );
}, time_limit);
doCountdown();
// Timer starten
thetimer = setInterval(doCountdown, 1000);
} else {
thetiles.classList.remove("color-empty");
thetiles.classList.add("color-full");
thetiles.innerHTML = '';
clearInterval(thetimer); // Timer löschen
localStorage.removeItem('target_date-' + id);
}
}
}
var thetimer1 = new Timer('timer1');
var thetimer2 = new Timer('timer2');
// Beliebig viele weitere Objekte anlegen
</script>Zitatallerdings würde ich den Zeitstempel, bis wann der Timer laufen soll ... darin speichern.
Genau das tut das vorhandene Skript, siehe ab Zeile 33 in Posting #6:
var target_date = Date.now() + time_limit; // set the countdown date
// Endezeit in den Localstorage eintragen
localStorage.setItem('target_date', target_date);bzw. ab Zeile 85 in der optimierten Version in Posting #23.
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!