Online counter. Countdown

In this article, we will look at several options for timers.

Option 1.
Simple timer using only minutes and seconds

For the timer to appear, you need to give the element an identifier timer and add a condition to the tag

That's it, the timer is ready.

Option 2.
The picture will serve as the numbers for the timer. Also in this timer, in addition to minutes and seconds, hours and days are available. Our timer will count down to a specific day.

We design the page


Countdown timer




The digits2_orange.png picture will be used to display the time.

Next, we write js code
image - our picture
startTime is just the time remaining until 09/01/2017
timerEnd - what happens when the timer ends, in our case the corresponding inscription will be inserted into the container with the tut identifier
Next is our timer


Left:




Days
Hours
Minutes
Seconds









We make out
#layer (
width: 600px;
text-align: center;
margin: 0 auto;)

#counter (
margin: 10pt auto 0 auto;
width: 414px;)

Desc (
width: 430px;
margin: 0px auto;)

# days, # hours, # minutes, # seconds (
float: left;
font: 13px Arial, Verdana, sans-serif;
width: 50px;
margin-right: 63px;
font-weight: bold;
color: # 000;)

#seconds (margin-right: 0px;)

CntSeparator (
font-size: 50px;
margin: 6px 7px;
color: # 000;)
Option 3.
In our opinion, the most convenient. Just like the previous one, it shows the remaining number of days, hours, minutes, seconds. Does not use an image to display the counter.
To work, we need a jquery library and a file

We design the page


Countdown timer






  • 00
    days



  • 00
    clock



  • 00
    min



  • 00
    sec







And css for styling the look
.countdown (
list-style: none;
margin: 6px 0 0 0;
padding: 0;
display: block;)

Countdown li (display: inline-block;)

/ * here days, hours, minutes, seconds * /
.countdown li span (
width: 100%;
color: # 000;
font: 18px Verdana;
display: inline-block;)

/ * separators. and: * /
.countdown li.seperator (
color: # 000;
font: 16px Verdana;
vertical-align: top;)

Countdown li div (
margin: 0;
color: # a7abb1;
font: 8pt Verdana;)

Tabata timer can be bought in a store as a separate device, used online or installed as an application on a smartphone (for example, for Android, for Iphone). The online version is convenient because you do not need to install anything, everything is simple and intuitive.

How to use the interval timer:

The interval times can be changed using the buttons - and + after selecting the desired item:

Preparation- default 10 sec... This is the time it takes to get away from the computer and get ready for your workout.

Work- set by default 20 sec... This is the exercise time.

Relaxation- default 10 sec... This is the rest time between rounds.

Rounds- set by default 8 ... This is the number of approaches (work + rest).

Cycles- set by default 1 ... This is the number of circles of 8 rounds. Increase over time to 3-4 cycles. Rest is usually done for 1 minute between cycles. Rest time between cycles is set in the "Preparation" item.

Video version of interval timer with music:

Hi friends! In this article, I will review three online services for creating a countdown timer that I met when I needed to replace an inoperative timer with a reseller kit.

Digging in scripts and codes is not my strong point, so I decided to use a simple and quick solution - a special service. Visually set up your timer on it and then insert the finished script in the place of the idle one.

While I was looking, I came across three good online tools, and decided to tell about them. Perhaps they will also be useful to you in your work.

Watch my video review of these services. In the video, I also show you how to set a timer on a website:

So, the first service where you can quickly make a nice timer is e-timer.ru.

Here we have a window with rather flexible settings; a preview of the result and the code that will need to be copied and pasted into your site to display the timer.

Actually, the whole process comes down to customizing for yourself. In the main settings, we indicate whether the jquery library is connected on the site. You can check it by looking at the source code of the site (ctrl + u), then press ctrl + f to search.

If we choose to restart, say, every day, then the counter will start counting again every day.

We can also change the inscription on the counter "Until the end of the promotion", increase or decrease it, or remove it altogether, leaving this field empty.

In the timer display settings, we can edit its appearance:

Change the font and color of the labels;
separators between numbers;
language of inscriptions (available in Russian, Ukrainian, English);
padding and background color;
borders and shadow.

Here you can play in different ways and immediately look at the result.

In the settings for displaying numbers, we can choose:

The smallest value - if we choose "minutes", then the seconds will no longer be displayed;
font, size and color of numbers;
internal indent - as it increases, the counter is stretched in length.
borders - when we increase, the corners of the squares surrounding the numbers are rounded.
and a shadow - if we put 0 here, then we will completely remove the squares around the numbers.

When all the settings are done, copy the timer code and paste it in the right place on the site.

I will show you with an example of a simple html landing page that I opened for editing in notepad ++. I want to put the timer right under the payment button, so I find this place in the code, place the script, and center the timer using tags

... Like this:

click to enlarge

And on the landing page, my timer looks like this:

Next online service megatimer.ru... I liked it more, although there are fewer opportunities for external timer settings.

So, in the upper part we see how the counter will be displayed, and just below - the tabs with settings.

"Timer type" - here we configure the principle of its operation. If before a certain date, then we indicate the end of the countdown (according to the local time of the user or in Moscow, for example).

If for a period of time, then we can set a timer for 24 hours for each new visitor. Then we select the starting point from the first visit by the client and indicate the duration - 24 hours. In this case, in the upper right corner, uncheck "Days", leaving only hours, minutes and seconds on the timer.

Although, if the same visitor visits the page with a timer from another browser or clears the cache, then the countdown for him will start over.

There is also a cyclic timer that can be restarted every day at a certain frequency.

"Design" - from the proposed options we can choose the appearance of our timer. There are not many choices, but there are several versatile options.

"Settings" - at this stage we have the opportunity to change the font, size and color of the numbers, the indent between them, the separator, as well as the font, size and color of the inscriptions.

The final step is to copy the short code and, all the same, place it in the right place on the site.

And the last service that I want to stop today is timegenerator.ru... Allows you to generate a timer in a matter of seconds, since there are a minimum of settings here.

Before us are 4 options for timers, of which we choose the most suitable for ourselves by clicking on the corresponding button.

It's simple, friends. Now you know where to quickly and easily create a countdown counter for your website.

Thanks for attention! As always, I am glad for your comments.

Sincerely, Victoria

We present you a new, maximally simple and functional service for all those who are not indifferent to time for one reason or another. The online timer will allow you to time the time whenever you need it. Whether it's timing at sporting events, setting your own personal bests, or maybe you just need to timing your dumplings. Personally, I, the creator of this service, use it myself in order to keep track of the cooking time of certain dishes. Very convenient and correct. My cooking doesn't live without a timer. I keep track of time in everything - from frying cutlets to cooking borscht or chicken soup. Just recently, a friend of mine confessed to using my online timer as an alarm clock! After all, at the end of the countdown, the predetermined time, the timer can play a sound. And here it is clear that the sound from computer speakers will be louder than a regular alarm clock, that is, the likelihood of waking up is higher. For me, this is something new, to be honest, I never thought that the online timer can be used as an alarm clock, but all because it has a sound function. Now I'll try it myself. But this site has more than just a timer. You can also use the online stopwatch service. Yes, you don't have to use a timer, you have a choice. The stopwatch, for example, is very convenient to use when doing sports at home. You can track different approaches, breaks between exercises, exercise times. But that's not all. I've always liked timers to count down the number of days until a certain event, for example, a timer for how many days are left until the summer or a timer for how many days are left until the New Year. This is such a banal thing, but sometimes it's interesting to come in and see - how many days are left until ...

How to use my online timer

Everything is very simple:)
Go to the site, Welcome! Go to the "Timer" tab, press the green arrow to start the countdown. To pause the countdown, click on Pause (orange button). The Stop button will stop timing. And the rotating blue arrow button will reset the timer values. Of course, you can exhibit any time you need. Especially for convenience, I have prepared presets for time marks, just hover your cursor over the timer button and my site will offer you to choose the time you need. If there is no required time, it does not matter, you can enter the time required for timing manually.

Most importantly, the online timer is completely free and easy to use. I made it, first of all for myself, for my culinary needs, which means high quality. See for yourself right now, use the free service - an online timer, stopwatch or countdown to significant events.