Implement Countdown timer in Oracle Apex use JavaScript

How to implement countdown timer in Oracle Apex use javascript Function

 How to implement countdown timer in Oracle Apex use javascript Function




1. Create a New Region 
2. Goto Region Source  >> Paste the following code -
    <center>
            <div style="line-height: 1.5; font-size: 3.2rem; font-weight: 500">
            <span id="hour">00</span> :
            <span id="min">00</span> :
            <span id="sec">00</span> :
            <span id="milisec">00</span>
            </div>
       </center>
3.  Create Tow New Button 1-START, 2- RESET
4. Goto START Properties >> Advanced >> Static ID - START
5. Create dynamic action on the START button >> Name- Smart Watch startStop
        Action >> Execute JavaScript Code > aste the following code - startStop();
6. Create dynamic action on the RESET button >> Name- Smart Watch Reset
        Action >> Execute JavaScript Code > aste the following code - reset();
7. Goto Page Properties >> Execute when Page Loads >> Paste the following code-
     var timerModule = (function() {
  var startElmtId = 'START';
  var miliSecElmtId = 'milisec';
  var secElmtId = 'sec';
  var minElmtId = 'min';
  var hourElmtId = 'hour';
  var $startBtn = $('#' + startElmtId);
  var timerRef;
  var milisec = 0;
  var sec = 0;
  var min = 0;
  var hour = 0;
  var miliSecOut = 0;
  var miliSecElmt = document.getElementById(miliSecElmtId);
  var secOut = 0;
  var secElmt = document.getElementById(secElmtId);
  var minOut = 0;
  var minElmt = document.getElementById(minElmtId);
  var hourOut = 0;
  var hourElmt = document.getElementById(hourElmtId);
  function startStop() {
    if (timerRef === undefined) {
      $startBtn.children('span').text("Stop");
      start();
    } else {
      $startBtn.children('span').text("Start");
      stop();
    }
  }
  function start() {
    timerRef = setInterval(timer, 10);
  }
  function stop() {
    clearInterval(timerRef);
    timerRef = undefined;
  }
  function timer() {
    miliSecOut = checkTime(milisec);
    secOut = checkTime(sec);
    minOut = checkTime(min);
    hourOut = checkTime(hour);
    milisec = ++milisec;
    if (milisec === 100) {
      milisec = 0;
      sec = ++sec;
    }
    if (sec == 60) {
      min = ++min;
      sec = 0;
    }
    if (min == 60) {
      min = 0;
      hour = ++hour;
    }
    miliSecElmt.innerHTML = miliSecOut;
    secElmt.innerHTML = secOut;
    minElmt.innerHTML = minOut;
    hourElmt.innerHTML = hourOut;
  }
  /* Adds 0 when value is <10 */
  function checkTime(i) {
    if (i < 10) {
      i = "0" + i;
    }
    return i;
  }
  function reset() {
    milisec = 0;
    sec = 0;
    min = 0
    hour = 0;
    miliSecElmt.innerHTML = "00";
    secElmt.innerHTML = "00";
    minElmt.innerHTML = "00";
    hourElmt.innerHTML = "00";
  }
  return {
    startStop: startStop,
    reset: reset
  };
})();
window.startStop = timerModule.startStop;
window.reset = timerModule.reset;       


Then Enjoy......................

1 comment

  1. sadadadas
    sadadadas
    Hi, i want to ask that how to store this timer value in database?
Hlo Sir