Countdown code. Countdown. Countdown timer. Working example of a Countdown Timer with a message when the time has expired

The simplest and most convenient countdown timer

HTML

Countdown Clock

Days

Hours

Minutes

Seconds

CSS

body ( text-align: center; background: #00ecb9; font-family: sans-serif; font-weight: 100; ) .countdown-title ( color: #396; font-weight: 100; font-size: 40px; margin: 40px 0px 20px; ) .countdown ( font-family: sans-serif; color: #fff; display: inline-block; font-weight: 100; text-align: center; font-size: 30px; ) .countdown -number ( padding: 10px; border-radius: 3px; background: #00bf96; display: inline-block; ) .countdown-time ( padding: 15px; border-radius: 3px; background: #00816a; display: inline-block ; ) .countdown-text ( display: block; padding-top: 5px; font-size: 16px; )

Javascript

function getTimeRemaining(endtime) ( var t = Date.parse(endtime) - Date.parse(new Date()); var seconds = Math.floor((t / 1000) % 60); var minutes = Math.floor(( t / 1000 / 60) % 60); var hours = Math.floor((t / (1000 * 60 * 60)) % 24); var days = Math.floor(t / (1000 * 60 * 60 * 24) ); return ( "total": t, "days": days, "hours": hours, "minutes": minutes, "seconds": seconds ) function initializeClock(id, endtime) ( var clock = document.getElementById) (id); var daysSpan = clock.querySelector(".days"); var hoursSpan = clock.querySelector(".hours"); var minutesSpan = clock.querySelector(".minutes"); ".seconds"); function updateClock() ( var t = getTimeRemaining(endtime); daysSpan.innerHTML = t.days; hoursSpan.innerHTML = ("0" + t.hours).slice(-2); minutesSpan.innerHTML = ("0" + t.minutes).slice(-2); secondsSpan.innerHTML = ("0" + t.seconds).slice(-2);<= 0) { clearInterval(timeinterval); } } updateClock(); var timeinterval = setInterval(updateClock, 1000); } var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000); // for endless timer initializeClock("countdown", deadline);

Specify the end date of the timer

ISO 8601 date output format:

Var deadline = "2015-12-31";

Short format:

Var deadline = "31/12/2015";

Long format:

Var deadline = "December 31 2015";

Displaying the date with exact time and time zone:

Var deadline="January 01 2018 00:00:00 GMT+0300";

Timer output for landing pages – the timer will always display that there are 15 days left (you can specify any time)

Var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);

Working example of a Countdown Timer

Hide the timer after the time has expired and display a message that the time has expired

This solution was suggested in the comments by Igor.

Add a block with a message to the HTML

Time is up!

Add the following styles to CSS:

Deadline-message( display: none; font-size: 24px; font-style: italic; ) .visible( display: block; ) .hidden( display: none; )

In the script, we change the timer initialization function function initializeClock(id, endtime) (...) , leaving the rest the same as it was:

Function initializeClock(id, endtime) ( var clock = document.getElementById(id); var daysSpan = clock.querySelector(".days"); var hoursSpan = clock.querySelector(".hours"); var minutesSpan = clock.querySelector (".minutes"); var secondsSpan = clock.querySelector(".seconds"); function updateClock() ( var t = getTimeRemaining(endtime); if (t.total<= 0) { document.getElementById("countdown").className = "hidden"; document.getElementById("deadline-message").className = "visible"; clearInterval(timeinterval); return true; } daysSpan.innerHTML = t.days; hoursSpan.innerHTML = ("0" + t.hours).slice(-2); minutesSpan.innerHTML = ("0" + t.minutes).slice(-2); secondsSpan.innerHTML = ("0" + t.seconds).slice(-2); } updateClock(); var timeinterval = setInterval(updateClock, 1000); }

What has changed in this function is that when the timer expires, a .hidden class is added to the timer itself (hides the timer), and a .visible class is added to the message about the end of time (displays a message), and we also stop executing the function by calling the clearInterval(timeinterval) method ); . And the output of time units is placed after checking whether the time has expired or not.

Working example of a Countdown Timer with a message when the time has expired

Click the button Rerun to make sure everything is working as it should.

Countdown timer with restart

The essence of the timer is that when the time expires, the timer does not stop, no message is displayed, but simply begins a new countdown:

The timer is set for 5 seconds and will restart for another 5 seconds when the time runs out

Function getTimeRemaining(endtime) ( var t = Date.parse(endtime) - Date.parse(new Date()); var seconds = Math.floor((t / 1000) % 60); var minutes = Math.floor(( t / 1000 / 60) % 60); var hours = Math.floor((t / (1000 * 60 * 60)) % 24); var days = Math.floor(t / (1000 * 60 * 60 * 24) ); return ( total: t, days: days, hours: hours, minutes: minutes, seconds: seconds ) function initializeClock(id, endtime) ( var clock = document.getElementById(id); var daysSpan = clock.querySelector (".days"); var hoursSpan = clock.querySelector(".hours"); var minutesSpan = clock.querySelector(".minutes"); var secondsSpan = clock.querySelector(".seconds"); ( var t = getTimeRemaining(endtime); if (t.total<= 0) { clearInterval(timeinterval); var deadline = new Date(Date.parse(new Date()) + 5 * 1000); initializeClock("countdown", deadline); } daysSpan.innerHTML = t.days; hoursSpan.innerHTML = ("0" + t.hours).slice(-2); minutesSpan.innerHTML = ("0" + t.minutes).slice(-2); secondsSpan.innerHTML = ("0" + t.seconds).slice(-2); } updateClock(); var timeinterval = setInterval(updateClock, 1000); } var deadline = new Date(Date.parse(new Date()) + 5 * 1000); initializeClock("countdown", deadline);

The difference in the JS code between the option with displaying a message about the end of time is only in replacing this code

If(t.total<= 0) { document.getElementById("countdown").className = "hidden"; document.getElementById("deadline-messadge").className = "visible"; clearInterval(timeinterval); return true; }

If(t.total<= 0) { clearInterval(timeinterval); var deadline = new Date(Date.parse(new Date()) + 5 * 1000); initializeClock("countdown", deadline); }

Please note that when we reset the timer, we need to set a new deadline, and it may be completely different than the original one, which is indicated on the penultimate line of code:

Var deadline = new Date(Date.parse(new Date()) + 5 * 1000);

Within the framework of the presented tool, different operating modes of the online stopwatch are implemented:

Stopwatch - countdown
Countdown timer with sound
Interval timer

The free stopwatch can be used, for example, to measure your heart rate, register unofficial sports achievements, or pass standards. For marketers and testers, an online stopwatch can be useful for counting time when checking the usability of a website or application (usability assessment). Countdown can be used during training, for example, assembling and disassembling weapons or a Rubik's cube.

The initial settings of the stopwatch or countdown timer are set directly in the interface; just click on the numbers and set the desired value.

Interval timer for training

The fitness timer can be used to set intervals for Tabata and other interval training with alternating rest periods and high-intensity work. It supports setting work and rest intervals and setting the number of laps (repetitions).

The stopwatch is available online and free of charge. In the timer, you can set the countdown to 30 seconds, 1, 2 minutes or an arbitrary time. There is no need to download the program to your computer or install the application on your phone. The online timer service can be used at a convenient time and place via the Internet.

If you suddenly need to use a timer or stopwatch, but the necessary device is not at hand, then this application will come to your aid!

Attention! To display an interactive element in an article, you will need Adobe Flash Player installed on your system (browser).

HOW TO USE:

Online stopwatch with sound

Press the Stopwatch button, then press the Start button. You will hear a single beep indicating that the countdown has begun.

At the end of the measurement, press the “Stop” button, a multiple signal will sound, but this time indicating the end of the countdown.

Online countdown timer with sound

Click the Timer button. A window for setting the timer time will open. Select the desired number of minutes and seconds and click OK. Click the "Start" button. An alarm will sound and the countdown will begin.

You can stop the timer at any time by pressing the “Stop” button or wait until the set time has finished counting – a signal will sound.

Interval timer online

To start the interval timer, click the Intervals button. This timer is superior to many of its counterparts in that it allows you to set two different intervals and the number of rounds (repetitions).

For example, you want a sound to sound every 10 seconds for a minute. To do this, select Interval 1 =10, Interval 2 =10, Rounds =6 and click the “Start” button.

And if you want the sound to sound for the first time at 10 seconds of the countdown, and the second time, for example, at 25, then set Interval 1 = 10, Interval 2 = 25. Determine the number of rounds based on your requirements.

For what purposes is this free online timer and stopwatch suitable? For anything! To measure your pulse, breathing, to remind you of something (set eggs to boil), for exercises with a Rubik's cube (for speedcubing), for training and physical exercise - the range of its uses is endless!

Online timer will allow you to time various events - even if it's boiling eggs. With a countdown timer you will definitely not miss the right moment.

To set a timer, you need to click on the “Set timer” button and specify the required time (hours, minutes and seconds) in the pop-up window, or you can select to specify a specific date and time for the timer to fire after a few days. If you need to notify with sound when the specified time arrives, then select the desired melody from the list (you can listen to each melody). You can also specify a message to be shown on the screen when triggered countdown timer. After specifying all the necessary information, click “Start” to start the online timer.

Remember that to trigger online timer with sound on a computer or phone, the speaker sound must be turned on (on the phone you need to make sure that the “Media” sound is set to the desired level)! If you don’t need to play the melody, you can uncheck the “Timer call” checkbox. In this case, only the message will be indicated.

For correct operation of the online timer NO need in a constant Internet connection, but it WILL NOT work, if the browser is closed or the computer is turned off/in sleep mode.

Why do you need an online countdown timer? We urgently need to measure the time. There is no special device at hand. Is it inconvenient to use a regular watch or mobile phone? We bring to your attention an online timer. It is highly accurate and easy to use.

Online timers are indispensable during sports training or combining several tasks. When it is important not to miss time and just to measure personal records. It is very important for you to know how many pages you will read in a certain period of time. How many characters do you type per minute or how quickly can you complete an important round in the game.

Online timer for every taste

Here are reverse timers with both laconic and original design. You can expand the application to full screen. Decorate your desktop with a beautiful antique or hourglass, rocket, bomb, romantic candle. All timers have convenient functionality. It only takes a few seconds to set the time.

You can use an online countdown timer with sound directly on our website. Open any timer in full screen. Value your time. Everything is very simple and fast! If you have an Internet connection, you can activate the timer absolutely free at any time convenient for you.

How does an online countdown timer work?

All timers presented in this section have very simple and convenient controls. Indicate the time period you need, press “start” and the timer will start working!

Typically, each countdown timer has three windows:

the first one shows the hours
in the second - minutes
in the third - seconds

If necessary, you can use the “pause” function or cancel the task altogether.

Do you want to choose the best online timer? All the counters are here. Choose the one that suits you! After using the timer, also feel free to share your opinion with others!