Stand-Alone JavaScript Timer


in this section, we will build a timer to add to the Sudoku puzzle page, and will progress in three stages:

  • A Stand-Alone JavaScript timer that is run locally (outside of PeopleSoft)
  • A Stand-Alone JavaScript timer that is run within a PeopleSoft page
  • An embedded JavaScript timer within the Sudoku page
The behavior of the timer is to increment the number of seconds in an Hours:Minutes:Seconds format. A pause button will pause the timer, and change the label of the Pause button to Start; Pushing the Start button will resume the timer, and change the button text back to Pause
The JavaScript program manages two variables: elapsedTime, which holds the elapsed time in seconds, and timerRunning, which holds the boolean value representing if the timer is running or not.
Functions include:
  • startTimer executes at the start of the program and calls function advanceTimer
  • advanceTimer advances the elapsedTime value if the timerRunning variable is True, and sets the HTML to display the formatted time
  • formatTime returns a string representing the seconds in a HH:MM:SS format
  • toggleTimer toggles the timerRunning boolean variable between True and False, and toggles the button label.
The program allows an initial number of seconds (non-zero) to be set. We will need this so we can save the puzzle, along with the elapsed time, and resume the timer when you re-launch the web-app.

Take Aways

Javascript is embedded between <script> tags
the onclick event will execute a function upon clicking on that control
setTimeout is a JavaScript function that executes a function after waiting a number of milliseconds

Complete and Continue