Designing an On-Screen Timer Using JavaScript

Introduction to JavaScript for Timer Design

JavaScript is a powerful and widely-used programming language, making it ideal for creating on-screen timers. One of its strengths lies in its ability to handle time-based events through functions like setTimeout and setInterval. These functions allow developers to create interactive and dynamic timers with relative ease.

Understanding milliseconds and the concept of delay is fundamental when working with JavaScript timers. Time in JavaScript is measured in milliseconds, where 1000 milliseconds equal 1 second. By using setTimeout and setInterval, developers can create delays and manage the timing and frequency of repeated actions effectively. This capability is essential for implementing functionalities such as countdowns, stopwatches, and session timers in web applications.

• setTimeout: This function executes a function or specified piece of code after a set amount of time (delay). It is typically used for executing a single delayed action.

Example:

setTimeout(function() {

  alert(“This message is displayed after 2 seconds.”);

}, 2000);

• setInterval: This function repeatedly executes a function or specified piece of code at fixed time intervals. It is helpful for actions that need to be repeated over time, such as updating a timer display.

Example:

setInterval(function() {

  alert(“This message is displayed every 2 seconds.”);

}, 2000);

Defining Objectives and Requirements

Before diving into the code, it’s crucial to define the purpose and requirements of your timer. Ask yourself the following questions:

• What type of timer do you need? (Countdown, Stopwatch, Session Timer)
• What features should the timer have? (Start, Stop, Reset buttons)

Clearly identifying these objectives will guide the design and functionality of your timer.

Creating the Timer Variables and Functions

To create a functional timer, you need to define a few essential variables and functions.

Variables:

• time: Keeps track of the time (in seconds or milliseconds).
• intervalID: Stores the ID of the interval, allowing control over the repeated actions.

Functionalities:

• Start: Begins the timer and starts the interval.
• Stop: Stops the timer by clearing the interval.
• Reset: Resets the timer to its initial state.

Adding Countdown and Stopwatch

Implement logic for both countdown and stopwatch timers. A countdown timer decreases the time, while a stopwatch increases it.

The following is the interface designed in Adobe Captivate for a countdown timer with the following components:

• Input field to allow a user to enter the value of their choice to begin the countdown timer.
• Image grid with Caption and Subtitle to display the timer in hh:mm:ss format.
• Buttons to start, stop, and reset the timer.

Code for Start Button:

let time= window.cpAPIInterface.getVariableValue(‘variableEditBoxNum_3’);

let intervalID;

let isRunning = false;

if (!isRunning) {

intervalID = setInterval(function() {

            if (time > 0) {

            time–;

let hours = Math.floor(time/3600); 

if (hours < 10) { hours = “0” + hours; }                     

let minutes = Math.floor((time % 3600)/60);

if (minutes < 10) { minutes = “0” + minutes; }

let seconds = Math.floor(time % 60);

if (seconds < 10) { seconds = “0” + seconds; }      

window.cpAPIInterface.setVariableValue(‘H’, hours); window.cpAPIInterface.setVariableValue(‘M’, minutes); window.cpAPIInterface.setVariableValue(‘S’, seconds); window.cpAPIInterface.setVariableValue(‘interval’, intervalID);                     

} else {

 clearInterval(intervalID);

 isRunning = false;

}

}, 1000);

isRunning = true;

}

Code for Stop Button:

let intervalID = window.cpAPIInterface.getVariableValue(‘interval’); 

clearInterval(intervalID);

Code for Reset Button:

window.cpAPIInterface.setVariableValue(‘H’, “00”);

window.cpAPIInterface.setVariableValue(‘M’, “00”);

window.cpAPIInterface.setVariableValue(‘S’, “00”);

Output:

The following is the interface designed in Adobe Captivate for a stopwatch timer with the following components:

• Image grid with Caption and Subtitle to display the timer in hh:mm:ss format.
• Buttons to start, stop, and reset the timer.

Code for Start Button:

let time = 0;

let intervalID;

function formatTime(value) {

            return value.toString().padStart(2, ‘0’);

        }

intervalID = setInterval(() => {

time++;

let hours = Math.floor(time / 3600);

let minutes = Math.floor((time % 3600) / 60);

let seconds = time % 60;

let h = formatTime(hours);

let m = formatTime(minutes);

let s = formatTime(seconds);

window.cpAPIInterface.setVariableValue(‘H’, h); 

window.cpAPIInterface.setVariableValue(‘M’, m);

window.cpAPIInterface.setVariableValue(‘S’, s);

window.cpAPIInterface.setVariableValue(‘interval’, intervalID); 

}, 1000);

The code for the stop and reset buttons remains the same as the countdown timer.

Output:

 Conclusion

A user-friendly design and accurate timekeeping are essential for a successful on-screen timer. By leveraging JavaScript’s capabilities, you can create interactive and functional timers to enhance your captivate projects. Experiment with different features and customization options to build timers that meet your specific needs.