Benötige einen timer der vorwärts läuft. Ja?
Hi,
was ich benötige, ist ein Timer der vorwärtsläuft.
Sobald die Seite geladen ist, fängt der Timer von 00:00:00 an.
Ab 10 Sekunden wird die Schrift rot.
Ab 20 Sekunden blinkt die Schrift rot.
Darunter ein Reset Button.
Sobald der betätigt wird, fängt der Timer von vorne an, und zwar wieder in Weiß und nicht in Rot.
Alle Versuche scheiterten :)
Jemand eine Idee wie ich dies verwirklichen kann?
Der hier verwendete Code
<style>
#balkenout{
border:2px solid black;
height:50px;
width:80%;
margin:0 auto;
overflow:hidden;
}
#timer{
text-align:center;
font-size:40px;
}
#balkenin{
background:green;
width:30%;
height:50px;
text-align:center;
}
#balkentext{
position:unset;
z-index:1;
text-align:center;
background:none;
font-size:40px;
color:black;
height:0px;
width:100%;
display:block;
}
.blinken{
animation:blink 500ms linear infinite;
background:green;
}
@keyframes blink{
0% , 49%{
background:green;
color:red;
}
50% , 100%{
background:red;
color:green;
}
}
</style>
<body>
<div id="balkenout">
<div id="balkentext">0</div>
<div id="balkenin"></div>
</div><br>
<div id="timer"></div>
<br>
<button id="newstart">Neu start</button>
<script>
var endtime=22;
var rot_ab_prozen=70;
var orange_bei_prozen=40;
var blinken=80;
var f=0;
var min=0;
var eletime=document.getElementById('timer');
var bo=document.getElementsByTagName('body')[0];
var butt=document.getElementById('newstart');
var elebalout=document.getElementById('balkenout');
var elebalkenin=document.getElementById('balkenin');
var balkentext=document.getElementById('balkentext');
timerrun(f);
function timerrun(f){
balken(f);
if(f<endtime){
tim=setTimeout(function(){
f++;
hour = Math.floor(f / 3600);
minute = Math.floor((f%3600) / 60);
second = Math.floor(f%60);
if ( hour < 10 ) {
hour = "0"+hour;
}
if ( minute < 10 ) {
minute = "0"+minute;
}
if ( second < 10 ) {
second = "0"+second;
}
eletime.innerHTML=hour+' : '+minute+' : '+second;
timerrun(f);
},1000);
}else{
clearTimeout(tim);
}
}
function balken(f){
var bawi = elebalout.getBoundingClientRect();
x=bawi.width;
x1pro=x/endtime;
end=x1pro*f;
elebalkenin.style.width=end+'px';
pro=((100/endtime)*f).toFixed(2);
balkentext.innerHTML=pro+' %';
if(pro>orange_bei_prozen){
elebalkenin.style.background='orange';
}
if(pro>=rot_ab_prozen){
elebalkenin.style.background='red';
}
if(pro<orange_bei_prozen){
elebalkenin.style.background='green';
}
if(pro>blinken){
elebalkenin.setAttribute('class','blinken');
}
if(pro>=100){
elebalkenin.removeAttribute('class','blinken');
}
}
butt.addEventListener('click',function(){
clearTimeout(tim);
var f=0;
if(pro>blinken){
elebalkenin.removeAttribute('class','blinken');
}
timerrun(f);
})
</script>
</body>