JavaScript Alarm Clock

A JavaScript alarm clock compares the current time with a target time and triggers an action when the target is reached. The reliable pattern is to create a target Date, store its timestamp, and check the remaining time with a function callback.

Basic idea:

const target = new Date();
target.setHours(18, 30, 0, 0);

if (Date.now() >= target.getTime()) {
  console.log("Alarm time reached");
}

Working Alarm Clock Top ↑

Set a time using the controls below. If the selected time is earlier than the current time, the example schedules it for the next day.

Creating the Alarm Time Top ↑

setHours() can set hours, minutes, seconds and milliseconds together. The numeric hour should be 0–23, while minutes and seconds should be 0–59.

const alarm = new Date();
alarm.setHours(7, 15, 0, 0);

For direct input, an HTML <input type="time"> can be simpler than three numeric fields. Separate fields are still useful when you want explicit seconds or custom increment/decrement controls.

What If the Selected Time Has Already Passed? Top ↑

If an alarm is meant to represent the next occurrence of a clock time, move it to tomorrow when today's target is already in the past.

if (alarm.getTime() <= Date.now()) {
  alarm.setDate(alarm.getDate() + 1);
}

Checking the Clock Top ↑

Use a function callback with setInterval() or a recursive setTimeout(). Do not use a string such as setTimeout('checkAlarm()', 1000).

const timerId = setInterval(() => {
  if (Date.now() >= alarm.getTime()) {
    clearInterval(timerId);
    alert("Alarm time reached");
  }
}, 1000);

Compare timestamps rather than counting exactly 1,000 milliseconds per callback. Browser timers can run late, especially when a tab is inactive.

Validating Alarm Controls Top ↑

HTML min and max attributes improve the UI, but JavaScript should still normalize or reject unexpected values.

function clamp(value, min, max) {
  return Math.min(max, Math.max(min, Number(value) || 0));
}

The older version of this tutorial used up/down arrow images. Modern numeric inputs, buttons and labels are more accessible, but the same increment/decrement logic can still be implemented when a custom picker is needed.

Canceling and Resetting the Alarm Top ↑

Keep the timer identifier returned by setInterval(). When the user cancels the alarm or the target is reached, call clearInterval() and reset your state.

let timerId = null;

timerId = setInterval(checkAlarm, 1000);

clearInterval(timerId);
timerId = null;

Background Tabs and Reliability Top ↑

A browser page is not a guaranteed system alarm. Browsers may throttle timers in background tabs, suspend inactive pages, block audio until the user interacts, or stop work when the device sleeps. For an in-page reminder, recomputing from the target timestamp is appropriate; for a dependable system alarm, use platform notification/alarm capabilities instead.

Common Alarm Clock Mistakes Top ↑

• Scheduling today's time even though it has already passed.
• Assuming timer callbacks run at exactly the requested interval.
• Using string callbacks instead of functions.
• Failing to cancel the timer after the alarm fires.
• Mixing local clock time with UTC timestamps without deciding which one the alarm represents.

Open standalone alarm demo Download alarm example

Related: JavaScript clock, setInterval(), clearTimeout(), getTime(), switch statements, and parseInt().

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: