Add a stopwatch to your Oracle APEX application

Photo by Stanos on Unsplash

Add a stopwatch to your Oracle APEX application

Would you like to add a simple stopwatch to a new or existing Oracle APEX application?

Please follow the steps below

  1. Create a page item of type textfield e.g P11_TIMER and include below custom attributes style="text-align:center; font-size:xxx-large". In my case want the text to appear extra large

  2. Add the below css in the inline section of the page, this will ensure no text shows after the text field.


  3. Add the below HTML (got an idea from Codepen) into the "Post Text" box (in my case I want it to appear after the text field).


     <html lang = "en">
             &emsp;<div><span id="sampletime" class="donotshow">0</span></div>
             <div class="wrapper">
             <button id="startTimer" style="background-color:#4267B2; color: white; cursor: pointer;"  onclick="start();" type="button">Start</button>
             <button id="stopTimer" style="background-color:#FF7276; color: white; cursor: pointer;" onclick="stop();" type="button" >Stop</button>
             <button id="resetTimer"  onclick="resettozero();" style="cursor: pointer;" type="button">Reset</button>
                 var timeElapsed = 0;
                 var timerID = -1;
                 function tick() {
                     const tminutes = Math.floor(timeElapsed / 60);
                     const tseconds = timeElapsed - tminutes * 60;
                     function str_pad_left(string, pad, length) {
                                  return (new Array(length + 1).join(pad) + string).slice(-length);
                      const finalTime = str_pad_left(tminutes, '0', 2) + ':' + str_pad_left(tseconds, '0', 2);
                     document.getElementById("sampletime").innerHTML = finalTime;
                     apex.item( "P11_TIMER").setValue(document.getElementById("sampletime").innerHTML )
                 function start() {
                     if(timerID == -1){
                         timerID = setInterval(tick, 1000);
                 function stop() {
                     if(timerID != -1){
                         timerID = -1
                 function resettozero() {
                     timeElapsed = -1;

    Quite simple to implement. You might no longer need an actual stopwatch!

    See it in action here: