Html 카운트다운 타이머 - html kaunteudaun taimeo

How TO - JavaScript Countdown Timer

Learn how to create a countdown timer with JavaScript.

Try it Yourself »

Creating a Countdown Timer

Example

<!-- Display the countdown timer in an element -->
<p id="demo"></p>

<script>
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2024 15:37:25").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get today's date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Display the result in the element with id="demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";

  // If the count down is finished, write some text
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);
</script>

Try it Yourself »

Tip: Learn more about the window.setInterval() method in our JavaScript Reference.

Our free countdown timer is an accurate timer that you can use for your website or blog.

Count down to any special event, such as a birthday or anniversary. There are many ways for you personalize your own countdown timer, simply by filling out the gray form below on this page.

We also have Free Clocks available for your website or blog.

Main Features

Our free countdown timer is also referred to as a countdown clock. Here are some reasons why people use our countdown timer:

• The countdown is accurate — the clocks display current time, even if the user's computer clock is wrong.
• You have choices regarding DST — there are different options on how to deal with daylight saving time (DST) with regard to your countdown timer. Read more about the countdown timer and DST.
• The countdown takes into account any time zone — all the major time zones are supported.
• It is highly configurable — choose different backgrounds, text options, colors and fonts.
• You can choose units to display — from days to milliseconds.
• No registration is needed — the HTML code is available immediately.

Use the form below to customize your own countdown timer. A small preview window at the bottom right corner of your web page should also appear next to the form.

You may place up to six clocks and countdown timers on a single page. If more than two clocks/timers are used, a separate link to timeanddate.com should be provided on the page. To use the service you must be able to add HTML directly to your web page and IFRAME tags must be allowed.

You use the service on your own risk.

Copy or modify existing countdown

Select location clock should show time for

Location: or choose:

Select date and time to count down to

Configure countdown timer design

Countdown timer number customization

Customization for when time has not yet passed

Customization for when time has passed

Borders

Padding

Select type of web page/server and create HTML