Artikel-Hilfsmenü
Dienstag, 24. September 2019 – aktualisiert am Montag, 22. November 2021
Ein Countdown mit grafischer Fortschrittsanzeige
Hinweis:
Dieser Artikel ist älter als 18 Monate / wurde seit 18 Monaten nicht aktualisiert. Dies kann (muss aber nicht) dazu führen, dass der Artikel, und / oder darin beschriebene Techniken, nicht mehr aktuell sind. Bitte berücksichtigen Sie diesen Hinweis bei der Lektüre.
In der Demo für den sms2web-Ticker läuft ein Countdown bis zur Anzeige des Reload-Buttons. Dieser Countdown ist mit JavaScript und CSS realisiert.
Der Code
Unmittelbar vor dem schließenden </body>-Tag den folgenden JavaScript-Code einfügen.
<script>
dauer = 10; // Dauer des Countdown in Sekunden
function neu_laden() {
document.getElementById('nachher').style.visibility = 'hidden';
countdown_slider(dauer);
}
function countdown_slider(iCounter) {
if (iCounter >= 0) {
breite = iCounter * (100 / dauer);
if (document.getElementById('slider')) {
document.getElementById('slider').style.border = '1px solid #aaa';
document.getElementById('slider').style.background = 'linear-gradient(90deg, #aaa ' + breite + '%, transparent 0%)';
document.getElementById('slider').innerHTML = '<dfn aria-live="polite">'+iCounter+'</dfn>';
}
iCounter--;
setTimeout(countdown_slider, 1000,iCounter);
} else {
// Was soll passieren, wenn der Countdown abgelaufen ist:
// Hier nur beispielhaft: Button anzeigen zum Countdown Neustart
document.getElementById('slider').style.border = '1px solid transparent';
document.getElementById('nachher').style.visibility = 'visible';
}
}
function addEvent(obj, evType, fn){
if (obj.addEventListener){
obj.addEventListener(evType, fn, false);
return true;
} else if (obj.attachEvent){
var r = obj.attachEvent("on"+evType, fn);
return r;
} else {
return false;
}
}
addEvent(window, 'load', countdown_slider(dauer));
</script>
Dort, wo die Fortschrittsanzeige angezeigt werden soll, folgendes <div> ins HTML einfügen.
Nur für die Demo: Nach Ablauf des Countdown kann mit einem Button der Countdown erneut gestartet werden.
<div id="slider"></div>
<input id="nachher" type="button" value="Countdown neu starten ↻" onclick="neu_laden();" />
Und in den Head-Bereich (zwischen <head> und </head>) kommen die CSS-Angaben.
<style>
#slider{
width: 150px;
height: 5px;
border:1px solid #aaa;
margin-bottom: 10px;
}
#nachher {
visibility:hidden;
height: 2.5em;
font-size: 100%;
padding: 5px 10px;
color:#fff;
background-color: #888;
border-radius: 10px;
cursor: pointer;
display: block;
}
#nachher:focus, #nachher:hover {
color:#222;
background-color: #ddd;
}
</style>
Mit der vorgestellten Technik wird nur der animierte Fortschrittsbalken erzeugt. Was der Countdown bewirken oder verhindern soll, ist eine andere Sache. Im Falle des SMS-Tickers soll beispielsweise verhindert werden, dass der Ticker zu häufig reloaded oder aufgerufen wird, z.B. durch ein externes Script. Dazu muss das hier vorgestellte Script noch ein wenig erweitert werden. Bei Interesse bitte anfragen – bitte mit einer möglichst genauen Beschreibung der Aufgabenstellung.
Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.
4 Kommentare
Über Ihren Kommentar zu diesem Artikel freue ich mich.
Wenn Sie aber Fragen haben, und eine Antwort erwarten, nutzen Sie bitte das Supportforum! Die Nutzung des Forums ist auch ohne Registrierung möglich.
Pascal schrieb am Montag, 27.04.20 14:14 Uhr:
Die erste wirklich gute Beschreibung und sie hat für mich als absoluten Neuling sogar funktioniert! Sehr toll! Vielen Dank!
Wie kann ich den Code umbauen, wenn ich einen bestimmten Button anzeigen will, der momentan so dargestellt wird:
<a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="https://xyz.de">Jetzt Pushen!</a>
Normalerweise muss ich die else Bedingung doch ändern. Aber wie gesagt ich bin ein absoluter Neuling und weiß nicht genau, ob diese Kombination überhaupt so möglich ist.
Den Ticker bekomme ich mit der mitgelieferten else Bedingung auf jeden Fall zum Laufen ;)
Fritz schrieb am Montag, 27.04.20 20:40 Uhr:
@Pascal
Natürlich kannst du jedes Element, auch deinen Button, nach Ablauf des Countdowns sichtbar machen. Du kannst sogar grundsätzlich jede beliebige Aktion starten: Einen Song abspielen, eine neue Seite laden, whatever …
Zu deinem Beispiel: Gib deinem Button einfach die ID "nachher" (zusätzlich zu all den Klassen, die Bootstrap verwendet), dann musst du nicht einmal das Script ändern.
Steve schrieb am Dienstag, 19.05.20 17:35 Uhr:
Hallo, diese Countdown Fortschrittsanzeige macht sich gut um den User anzuzeigen wie lange seine Session noch aktiv ist. Da dem User eine Anzeige in Minuten und Sekunden menschlicher erscheit, habe ich den Code hierum erweitert.
Da man nicht immer nur nehmen soll, sondern auch mal etwas zurück geben sollte, stelle ich diese kleine Erweiterung hiermit gern zur Verfügung.
function countdown_slider(iCounter) {
if (iCounter >= 0) {
breite = iCounter * (100 / dauer);
var min = Math.floor((iCounter / 60) % 60);
var sec = Math.floor(iCounter % 60);
var sec0 = '';
if(sec < 10) {
sec0 = 0;
}
if (document.getElementById('slider')) {
document.getElementById('slider').style.border = '1px solid #aaa';
document.getElementById('slider').style.background = 'linear-gradient(90deg, #aaa ' + breite + '%, transparent 0%)';
document.getElementById('slider').innerHTML = '<dfn aria-live=\"polite\">Verbleibende Zeit bis zum automatischen Logout '+ min + \":\"+ sec0 + sec +' in Minuten.</dfn>'; //'+iCounter+'
}
iCounter--;
setTimeout(countdown_slider, 1000,iCounter);
} else {
// Was soll passieren, wenn der Countdown abgelaufen ist:
// Hier nur beispielhaft: Button anzeigen zum Countdown Neustart
document.getElementById('slider').style.border = '1px solid transparent';
document.getElementById('nachher').style.visibility = 'visible';
}
}
Olli schrieb am Donnerstag, 02.12.21 20:22 Uhr:
Hallo, ich baue gerade ein game. Aber mit js. oder einem Counter komme ich nicht klar. Bei mir wird die restzeit aus der datenbank statisch angezeigt und ein counter wäre schon toll.
Ich kann das script von dir einbauen, aber dann geht nur die zeit von dauer= und nicht meine bauzeit.
Was würde es kosten wenn du mir das in meine seite einbauen würdest? schreib mich doch mal an.
Gruß Olli