JavaScript Zur vollen Stunde class zu Objekt hinzufügen und wieder entfernen nach 10 Sekunden

[Zoker]

Hallo zusammen,

Ich möchte, dass zu jeder vollen Stunde einem Objekt eine Klasse zugewiesen wird, die dann nach 10 Sekunden (nach dem eine Animation fertig ist) wieder entfernt wird und dann zur nächsten vollen Stunde wieder das gleiche.

Momentan sieht mein Script noch so aus:

window.setInterval(function(){
	document.getElementById("flip").className="flip animated";
}, 5000);

Das agiert natürlich noch nicht zur vollen Stunde und auch wird die Klasse nicht entfernt, da ich nicht weiß, wie ich das Skript dazu bringen kann, erst noch 10 Sekunden zu warten.

Kann mir da jemand helfen?

Vielen Dank
Zoker

edit: Version 2 (geht die so?)

var cTime = new Date;
var time = 3600 - (cTime.getMinutes() * 60 + cTime.getSeconds());
		
window.setInterval(function() { 
	time--; 
	if(time == 0)
		document.getElementById("flip").className="pulse animated";
	else 
		document.getElementById("flip").className="";
}, 1000);

 

[Daaron]

Wird so oder so nur grenzwertig klappen. Dein Problem wird sein, wie Browser "inaktive" Tabs handhaben. Sobald ein Tab/Fenster den Fokus verliert, werden sämtliche JS-Berechnungen quasi eingestellt. Wechsel für 2 Minuten den Tab, und deine innere Uhr geht fast 2 Minuten nach.

 

[Zoker]

Wie kann ich das Problem lösen?

 

[arne1234]

Bei jedem Fokus den Intervall korrigieren

 

[Zoker]

Hast du da mal schnell ein Script dafür?

Oder reicht da ein:

$(window).focus(function() {
	var cTime = new Date;
}

oder ein

if (document.hasFocus()) {
	var cTime = new Date;
};

?