Make Custom User Authorization Schemes. Oracle Apex. Part-1

 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......................