Countdown widget. Free Online Countdown Timer Generators

Hello dear friends. In one of the previous articles, I discussed whether it is worth using (it is also called a timer countdown) on your landing page. So, if you think that you need it, then today I will tell you how to connect it to your landing page.

We will talk about several options, in one case it will be a countdown counter script that will loop every 24 hours. That is, you will be able to make a promotion. For example: “until the end of the day -” and the timer will show how much time is left until the end of the day. After a day, the timer will restart and start counting again

And in another version, I’ll tell you about online service, which allows you to connect a countdown counter. But here it is assumed that the meter is designed for a long period of time. For example, you plan to open a website in a month, and for now you have made a stub like this:

It can be used in different ways, for example, if the promotion is one-time and designed for a long period of time, then online connection more profitable, since you only need to add one line of code in the right place. In general, depending on the purpose, choose the appropriate option for you. Let's get started...

Countdown counter with restart

So, a countdown counter that will restart after a day. It was developed by a craftsman who has a blog mywpnote.ru. I came across the blog about six months ago, and it really helped me out at that time. Today I want to tell you about one of the meters that he developed and describe how to connect it.

The timers look like this:

Download the sources and in the archive you will see 4 folders with the names vid1, vid2, vid3, vid4 - in them different types design of timers. You can see everything and choose the one you like. The connection method is the same for everyone.

I will show on 4, since it seems to me to be the most universal. We open vid4 and in front of us standard set folders for most sources on the network. ( index file, a folder with style sheets, a folder with pictures, and a folder with a script). I slightly changed the file structure to make it easier for beginners to connect the counter. That is, I put the timer script in separate file, and before it was in the index.

How to connect a countdown counter script to your landing page?

Open index.html with any editor (I use sublime3) and see the following code.

From here you need to copy the connection of the style sheet and script (line 7 and 8) into your project.

And also, in the place where you would like to place the timer, you need to write div tag with class “countbox” – line 13. The code specifically places multiple timer connections to make it clear that they can be used multiple times on a page. Many scripts have problems with this, and the second time they do not want to be displayed on the screen.

Now you just need to copy the img, css and js folders, as well as their contents, into your project - and that's it! The countdown counter will work! As you can see, it takes a maximum of 5 minutes, and such an important element will be present on your site. If you have any questions, write in the comments, I will definitely help you connect the meter!

Countdown counter online

For those who need a different type of countdown counter, which was mentioned at the beginning of the article, there is a service with an incredibly simple connection method. All you need to do is go to the website www.timegenerator.ru and select one of the proposed timers.

Timer is a program for counting down time and turning off a computer or laptop after a user-specified interval.

Timer apps for Windows
Computer shutdown timer in Windows 7 as a standard one software solution does not exist, but shutdown in specified time possible thanks to the products third party developers.

1. Auto Shutdown– Windows 7 computer shutdown timer, with which you can restart your PC, send it to sleep, set a countdown timer or a specific time for a specific event.
2. PC Autos – a simple gadget for disabling, changing user or computer mode.
3. RC Shutdown timer - a compact timer program with dialing basic functions. The Auto System Shutdown gadget works in a similar way.

There are applications that do not require installation. PowerOff belongs to these. Any program for shutting down a PC based on Windows 7 can be downloaded for free.

Shut down your computer using certain time using a player (AIMP, WinAmp), torrent download managers and some online resources.

Shutdown without utilities
The computer timer in Windows 8 and Windows 7 can be set using command line. In the search field, enter: “shutdown -s -f -t 30”, and the arrangement of hyphens and spaces should be exactly like this. The number at the end of the command means the time in seconds after which the PC will shut down. That is, for 1 hour you need to register 3600, for 2 hours – 7200, etc. All you have to do is click “OK” and the system will report the shutdown after the specified period.

If it is necessary to cancel the shutdown, enter the code “shoutdown -a” in the “Run” field. In this case, a corresponding notification will appear in the tray.

Scheduler instead windows timer 8 and 7
sleep timer windows computer 7/8 can be replaced standard scheduler tasks. You need to go to the “Actions” section – “Create” simple task", fill in the "Name" column, click "Next". In the next window, the frequency is set, after which the command “shoutdown” is entered in the “Program or script” window, and the arguments field is “-s -f”.

To cancel, you need to go to the scheduler library and delete the task.

In contact with

Remember the timers “there are _ days _ hours _ minutes left until the New Year”? Today the countdown timer has transformed into a great one marketing tool- the counters are on landing pages online stores, on sales pages or landing pages. “5 days, 15 hours, 40 minutes left until the sale ends” or “7 hours, 15 minutes, 35 seconds left until the sale starts.” Of course, timers “warm up” the visitor’s interest, encourage him to take a targeted action on the site, limiting time and creating the effect of urgency or shortage of goods.

If your shares are one-time or not technical feasibility installing your own scripts - there are free online generators that will prepare working countdown timers in two or three clicks.

E-timer

Various customization and design options. The amount of code is small. The script runs on the service side.

Three timer options. Without design settings (only through CSS styles). The amount of code is large (script + styles + HTML code). The script works on the user side.

Flash Timer Generator

Without jQuery support — timer made on flash. Several design options. The amount of code is average. Operation of the counter on the service side.

jQuery countdown date generator

No registration. The amount of code is large. The script works on the user side.

Example of work:

The 100th anniversary is left.

The program will appeal to those who like to enjoy their waiting time. Main function TimeLeft applications this is the countdown. Among the utility tools, the user will find a countdown timer, clock, stopwatch, reminder and the creation of virtual stickers that allow you to create notes on your desktop. Using the capabilities in combination allows you to create a reminder with a timer, place it in any convenient place on your desktop, and schedule it to start when an event occurs. external application, set a computer shutdown timer, follow a link, or run a script. Set a timer on your desktop and the program will animate the passage of time at the expected moment and. When the time for the special event approaches, when the timer counts to zero and goes off, TimeLeft will notify and draw the user's attention to this by displaying a message on the screen, accompanied by an audible alarm.

Countdown timer

TimeLeft is easily applicable for any daily tasks at home and at work. The utility has a large number of settings and additional options. Among them are: startup settings, transparency, floating windows and message windows, button integration quick addition into the browser, the behavior of the TimeLeft tray icon, the assignment of hot keys, the schedule of working days, holidays and others. For a beautiful and stylish display of the time countdown, the program has big choice themes for the timer, skins allow you to customize appearance TimeLeft to suit your taste. Can be applied to a timer or stopwatch visual effect, set the style used to change numbers: vertical and horizontal slider, fade out one and the manifestation of another figure, imitation of a mechanical counter and others.

Screenshots of the TimeLeft program

Free version of TimeLeft and TimeLeft Deluxe

The free version has limitations: free program You can create no more than one tool, that is, you can simultaneously create a reminder, timer, clock, sticker and stopwatch, but each in a single copy. Paid version TimeLeft Deluxe allows you to connect an online auction to track, export the timer to java script, which can be placed on a web page, synchronized exact time via the Internet and remove restrictions on the number of simultaneously used program tools.

Official site: http://www.nestersoft.com/timeleft/
OS: Windows All
Supported languages: Multilingual platform, including Russian
Version: 3.62
License:freeware (free)

File size 2.36 MB

It happens that you need it for something countdown timer, there are many solutions on the Internet, but they are either very cumbersome or have dependencies on other libraries. Today we will look at how to make a countdown timer in javascript in 18 lines of code.

Plan

Calculate the remaining time

Set the correct end date

Firstly, you need to install correct date graduation. This will be a string in any of the formats that it understands Date.parse() method. Eg:

Var deadline = "2015-12-31";

Short format

Var deadline = "31/12/2015";

Or long format

Var deadline = "December 31 2015";

Each of these formats allows you to set the exact time (in hours, minutes, seconds) and time zone. For example:

Var deadline = "December 31 2015 23:59:59 GMT+02:00";

Calculate the remaining time

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
};
}

First we create a variable t to store the remaining time. Date.parse() method is built in javascript and allows you to convert a string with time into a value in milliseconds. This will allow us to subtract one time from another and get the difference between them.

Var t = Date.parse(endtime) - Date.parse(new Date());

Convert the date to a convenient format

Now we want to convert milliseconds to days, hours, minutes and seconds. Let's use seconds as an example:

Var seconds = Math.floor((t/1000) % 60);

Let's figure out what's going on here.

Divide milliseconds by 1000 to convert them to seconds
We divide total number seconds by 60 and save the rest - you don't need all the seconds, just the ones left after the minutes have been counted
Round down to the nearest whole number because you need full seconds, not fractions of them

Repeat this logic to convert milliseconds to minutes, hours, and days.

Output timer data as a reusable object

Once the hours, minutes and seconds are ready, we need to return them as a reusable object.

Return (
"total": t,
"days": days,
"hours": hours,
"minutes": minutes,
"seconds": seconds
};

This object allows you to call your function and get any of the calculated values. Here's an example of how you can get the remaining minutes:

GetTimeRemaining(deadline).minutes

Convenient, right?

Display a clock on the page and stop it when it reaches zero

Now we have a function that returns us the remaining days, hours, minutes and seconds. We can build our timer. First, create the following html structure for clock:

Then write a function that will display the data inside our div"a:

Function initializeClock(id, endtime)(
var clock = document.getElementById(id);
var timeinterval = setInterval(function())(

" +
"hours: "+ t.hours + "
" +
"minutes: " + t.minutes + "
" +
"seconds: " + t.seconds;

}
},1000);
}

This function takes two parameters: id element that will contain our clock, and the end time of the counter. Inside the function we will declare a variable clock and we'll use it to store a reference to our clock block, so we don't have to ask DOM.

Calculate remaining time
Display the remaining time in our div
If remaining time = 0, stop clock

The only thing left is to start the clock like this:

InitializeClock("clockdiv", deadline);

Congratulations! Now you have simple countdown timer in just 18 javascript lines code.

Prepare your watch for display

Before styling we will need to refine a few things a bit.

Remove the initial delay so that the timer appears immediately
Make the clock script more efficient so that you don't have to constantly rebuild all the clocks
Add zeros as desired

Removing the initial delay

In watches we use setInterval to refresh the display every second. Most often this is normal, except at the beginning, where there is a 1s delay. To fix this we need to update the clock once before setInterval starts.

To do this, let's move the anonymous function we pass to setInterval(the one that updates the clock every second) to its own separate function, which we'll call updateClock. Call this function once outside setInterval and then call her again inside setInterval. This way the clock will be shown without delay.

In your javascript replace this:

Var timeinterval = setInterval(function())( ... ),1000);

Function updateClock())(
var t = getTimeRemaining(endtime);
clock.innerHTML = "days: " + t.days + "
" +
"hours: "+ t.hours + "
" +
"minutes: " + t.minutes + "
" +
"seconds: " + t.seconds;
if(t.total clearInterval(timeinterval);
}
}

UpdateClock(); // run the function once to avoid delay
var timeinterval = setInterval(updateClock,1000);

Making the script more efficient

To make the script more efficient, we need to update not all the clocks, but only the numbers. To do this, put each number in a tag span and we will update only this content.

Here html:

Days:

Hours:

Minutes:

Seconds:

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);

DaysSpan.innerHTML = t.days;
hoursSpan.innerHTML = t.hours;
minutesSpan.innerHTML = t.minutes;
secondsSpan.innerHTML = t.seconds;

...
}