Skip to content Skip to sidebar Skip to footer

How To Get Play Button To Continue Timer On Javascript?

Codepen I am trying to simply get my play button to function but I don't know how. I got my pause button to work by adding clearInterval(timer) so I'm guessing I do the opposite of

Solution 1:

here this is simple code to use for a basic countdown timer, I let you add your unnotified "audio" part

<h3id="Count-Down">10</h3><selectid="Count-times" ><optionvalue="20">20</option><optionvalue="10"selected >10</option><optionvalue="5">5</option></select><buttonid="bt-Start">start</button><buttonid="bt-Pause"disabled >pause</button><buttonid="bt-Clear"disabled >clear</button>

JS:

CountDown = {
  CountDown : document.querySelector('#Count-Down'),
  CountTime : document.querySelector('#Count-times'),
  btStart   : document.querySelector('#bt-Start'),
  btPause   : document.querySelector('#bt-Pause'),
  btClear   : document.querySelector('#bt-Clear'),

  DownTime  : 10 * 1000,
  interV    : 0,

  Init()
  {  
    // just for clean start on reload pagethis.CountTime.value = 10;  

    // select timethis.CountTime.onchange =_=>{
      this.DownTime              = Number(this.CountTime.value) * 1000this.CountDown.textContent = this.CountTime.value
    }

    // buttons click eventthis.btStart.onclick =_=>{ 
      this.CountDownTime();
      this.CountTime.disabled = true;
      this.btStart.disabled   = true;
      this.btPause.disabled   = false;
      this.btClear.disabled   = false;
    }

    this.btPause.onclick =_=>{
      clearInterval( this.interV );

      this.btStart.disabled    = false;
      this.btPause.disabled    = true;
    }

    this.btClear.onclick =_=>{ 
      clearInterval( this.interV );

      this.DownTime              = 10 * 1000;
      this.CountTime.value       = 10;
      this.CountDown.textContent = 10;

      this.CountTime.disabled  = false;
      this.btStart.disabled    = false;
      this.btPause.disabled    = true;
      this.btClear.disabled    = true;
    }
  }, /// Init

  CountDownTime()
  {
    let D_End = new Date(Date.now() + this.DownTime );

    this.interV = setInterval(_=>{
      this.DownTime = D_End - (new Date(Date.now()));

      if (this.DownTime > 0) {
      // this.CountDown.textContent = Math.floor(this.DownTime / 1000) + '-' + (this.DownTime % 1000) ;this.CountDown.textContent = (this.DownTime / 1000).toFixed(2); ;
      }
      else {
        this.btClear.click();
      }      
    }, 100);
  }
}

CountDown.Init();

Post a Comment for "How To Get Play Button To Continue Timer On Javascript?"