How do I create a countdown timer on my webpage?

by 9 replies
11
I would like to put a countdown timer on my webpage which starts from 60 to 0 seconds.

What is the code to implement that? It is a html webpage btw.
#programming #countdown #create #timer #webpage
  • I cant post links so just search for "javascript countdown" in google and you will find...
    • [1] reply
    • Most of the codes I find have a target date.

      I do not wish to use a target date.

      I just wish to have the timer start counting down from 60 to 0 seconds once the page is loaded, and have that decreasing number displayed real time.
  • 1
    Navigate to the Create Your Countdown website (the link is located in the "Resources" section at the bottom of this page).

    2
    Click "Make A Countdown" in the navigation menu under the header image.

    3
    Enter the day you want the counter to end in the "Choose Day" box.

    4
    Type the time you want the counter to end in the "Choose Time" box.

    5
    Click "More Design Settings" under the "Choose Time" box.

    6
    Enter the name of your countdown clock in the "Headline" box.

    7
    Type the message you want to show when the countdown is complete in the "Headline when countdown finished (00:00:00)" box, if you want a special message to show.

    8
    Choose the "Direction" tab and select "Count backward (countdown)."

    9
    Click on the "Dimension" tab and choose the width and height of the countdown clock.

    10
    Select the "Countdown" tab and choose the size, color, margins and alignment of the countdown numbers.

    11
    Open the "Label" tab and choose the size, color, margins and alignment of the headline.

    12
    Select the "Background" tab and choose a background color for the timer.

    13
    Type the link of an image in the "Background picture,swf,flv (When countdown is running)" box if you would like the background to be an image or video when the timer is running.

    14
    Place a link in the "Settings for countdown finishes" box if you would like to display a picture or video when the timer finishes.

    15
    Open the "Link" tab and place a link in the "Link a website" box if you want to link your timer to a different website.

    16
    Choose the "Flv" tab and adjust your video settings if you chose to include a video with your timer.

    17
    Click "Create Embed Code."

    18
    Copy the code in the "Embed" box and place it on your website or social media page.
  • Hi there,

    Do not forget to use google, it is your friend

    JavaScript countdown
    • [1] reply
    • I have managed to make it work.

      Thank you all
  • Theres LOADS of ways to do this such as,

    Javascript
    JQuery
    PHP
    Flash

    I often use flash for a countdown timer. You can find some nice stylish looking countdown clocks and timers on the ActiveDen website, or it might be called CodeCanyon now...(sorry can't remember) If you use Flash, it is SUPER easy to set up and configure.
  • Either you can use javascript timer or you can use flash script or flash animationf or a countre. I would say flash timer is better one
    • [1] reply
    • Try these:
      mycountdown.org/
      myflashfetish.com/makewidget.php?id=2
      freecountdown.net/
  • I'll answer with a bunch of links, this time, rather than reinvent the wheel with my own solution. Here's a list of some of the most interesting or clearly-written countdown timers in a variety of different languages.

    Remember, though, that anything written in JavaScript has the inherent problem that it's relying on the clock of the visitor's computer being accurate. Macs all seem to sync to the network time servers, but I often see Windows machines off by hours, day, and sometimes even weeks (even in an otherwise well-managed IT environment like the University of Colorado, Boulder). However, if you're happy with a "95% solution", JavaScript will work fine...
Join the discussion

Next Topics on Trending Feed