How to Build Your Own Countdown Timer

How to Build Your Own Countdown Timer thumbnail
Create a countdown timer.

A countdown timer can be an entertaining thing to place on your website or blog if you are looking forward to a certain date. You can count down to birthdays, wedding dates, anniversaries, vacations and movie premieres. Although you need to have a basic understanding of HTML to place a countdown timer on your Web page, everything else involved with creating the countdown timer is quite simple.

Instructions

  1. Countdown Clock

    • 1

      Visit the "Countdown Clocks for Websites" Web page at 7is7.com (see References).

    • 2

      Type a title for your clock in the "Title" field.

    • 3

      Type the year, month and date to which you want to count down in the corresponding fields.

    • 4

      Type the hour, minute and second to which you want to count down in the corresponding fields. Select "24" if you want to use a 24-hour clock, or select "a.m." or "p.m." for a 12-hour clock.

    • 5

      Click the timezone drop-down list and click the timezone you want the timer to use to calculate the remaining time.

    • 6

      Click the check boxes next to the time units you want the countdown timer to show. You can show the remaining time in years, months, weeks, hours, minutes and seconds.

    • 7

      Click the "Generate iFrame Code" button.

    • 8

      Scroll to the bottom of the page and click in the box under the text that says "Text to copy and paste into your page:".

    • 9

      Press "Ctrl" and "A" to select the code and "Ctrl" and "C" to copy it.

    • 10

      Login to your blog or Web server and press "Ctrl" and "V" to paste the code.

    • 11

      Publish your page. You have built your own countdown timer.

    Countdown Date With Timer

    • 12

      Navigate your Web browser to Ricocheting.com's "HTML Date With Countdown Timer" Web page (see References).

    • 13

      Enter the appropriate information in the Year, Month and Day fields in the Date Expires section.

    • 14

      Enter the appropriate information in the Hour, Minute and Second fields in the Time Expires section.

    • 15

      Click the "Generate" button. Click your cursor in the "Source Code" box. Press "Ctrl" and "A" to select the code.

    • 16

      Press "Ctrl" and "C" to copy the code. Log into your Web page and press "Ctrl" and "V" to paste the code. Publish the page. You have now built a countdown timer.

    HTML Countdown Clock

    • 17

      Launch AutoCalculator.org (see References).

    • 18

      Enter the appropriate numbers into the Year of Event, Month Number and Day Number fields.

    • 19

      Enter the appropriate information in the Hour and Minute fields.

    • 20

      Type the title for the countdown clock in the Set the Occasion field and the message in the Occasion Message field. Click the "Get Free HTML Countdown Clock Code" button.

    • 21

      Press the "Ctrl" and "A" keys to select the code that appears and the "Ctrl" and "C" keys to copy it. Log into your Web page and paste the code by pressing "Ctrl" and "V." Publish the page. You have built and published a countdown timer.

Related Searches:

References

Resources

  • Photo Credit wind up timer at 0 minutes image by Andrew Brown from Fotolia.com

Comments

You May Also Like

Related Ads

Featured