Newsticker mit grafischer Fortschrittsanzeige

<html>
<head>

<style type="text/css">
marquee {color:red; font-weight:bold; font-size:1.5em}
#slider{width: 150px; height: 5px; border:1px solid #aaa; margin-bottom: 10px;}
#nachher {visibility:hidden; height: 1.5em; font-size: 1em; padding: 2px 2px; color:#fff; background-color: #888; border-radius: 20px; display: block;}
#nachher:focus, #nachher:hover {color:#222; background-color: #ddd;}
</style>
</head>

<body>
<center><table style="width: 30%">
<tr><td>
<marquee>HTML Knowhow ist einfach super !!!</marquee><br/>
<div id="slider"></div><br/>
<input id="nachher" type="button" value="Countdown neu starten ↻" onclick="neu_laden();" />
<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 {
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>
</td></tr>
</table>
</body>

</html>