Stand-Alone JavaScript Timer
Synopsis
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
Download