basti1012.bplaced.net

Du siehst gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.
    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?

    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>