Hallo zusammen
Ich komme bei meinem "kleinen" Projekt nicht mehr weiter. Habe leider auch nicht so die Kenntnisse in Javascript.
Aktuell stehe ich vor folgendem Probelm:
Auf meiner Website werden Timer aktiviert per Checkbox, welche dann eine Zeit x herunter laufen. Allerdings soll bei dem laden der Seite der aktuelle Timer nicht abgebrochen werden, sondern weiterlaufen und erst resettet werden wenn ich die Checkbox deaktiviere.
Folgenden Code besitze ich:
Javascript:
Code
<!--
function TimerUnter() {
var isChecked = document.getElementById("unter").checked;
var minutes = $( "#unter" ).val();
var target_date = new Date().getTime() + ((minutes * 60 ) * 1000); // set the countdown date
var time_limit = ((minutes * 60 ) * 1000);
//set actual timer
setTimeout(
function()
{
//alert( 'done' );
}, time_limit );
var days, hours, minutes, seconds; // variables for time units
var countdown = document.getElementById("tiles"); // get tag element
if (isChecked == true){
getCountdown();
setInterval(function () { getCountdown(); }, 1000);
function getCountdown(){
// find the amount of "seconds" between now and target
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
if ( seconds_left >= 0 ) {
console.log(time_limit);
if ( (seconds_left * 1000 ) < ( time_limit / 2 ) ) {
$( "#tiles" ).removeClass("color-full");
$( "#tiles" ).addClass("color-half");
}
if ( (seconds_left * 1000 ) < ( time_limit / 4 ) ) {
$( "#tiles" ).removeClass("color-half");
$( "#tiles" ).addClass("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;
}
}
else if (isChecked == false){
$( "#tiles" ).removeClass("color-empty");
$( "#tiles" ).addClass("color-full");
}
}
-->
Alles anzeigen
Ich gebe auch zu das dieser Code nicht von mir ist sondern von einer Website und ich habe ihn ein bisschen modifiziert für meine Anwenung.
HTML:
Code
<div class="toggle text">
<label style="left: -1.5em;"> Unter
<input type="checkbox" id="unter" value="180" onclick="TimerUnter()"> <span class="slider"></span> </label>
</div>
<br>
<div id="countdown">
<div id="tiles" class="color-full"></div>
</div>
Villt kann mir hier jmd weiterhlefen