Welcome to the blog of science fiction author Eileen Rhoadarmer--where science fiction and Mommyhood collide!

Wednesday, October 6, 2010

"Days Without Not Writing" New Counter

Once again, I'm pretending I know how to write code.

Apparently there aren't many Count Up Timers available online, at least if you only want to diplay days (as opposed to counting by the second or millisecond.)  Therefore, I thought I would provide a link and details about the one I found and am using for my new "Days Without Not Writing" Counter.


JavaScript Countdown/Count-up Timer/Clock/Ticker for Web Pages

Cost-free and advertising-free. But a link to his page is appreciated (by him, duh.)
Note: This service comes with NO GUARANTEES. No liability is assumed.
(Science Fiction Mommy assumes no liability either)
  • A free and simple JavaScript countdown/Count-up timer/clock/ticker to/from the target date and time of your choice. Just copy and paste to your Web pages. You can also customize the display format, foreground and background colors of the countdown timer.
  • You can omit most parameters. Default values will be used in that case. CountActive is used to enable to disable counting. If you only want to show a fixed static time-remaining message, set it to false. It'll save on browser resources.
  • DisplayFormat allows you to format the countdown/Count-up display to your liking. For example, instead of the default English, you can use terms from your own language, or make any other desired adjustments, like omitting the Seconds segment.
  • Use FinishMessage to display a desired message (or nothing, i.e. ""), when countdown reaches zero. Obviously never displayed when counting up.
  • CountStepper specifies the step value or period (in seconds) for the counter. Use positive number for counting up, negative number for counting down. Value is rounded up to next integer. When specifying positive (count up), be sure to specify past TargetDate, otherwise only the finish message is displayed.
  • Single digits are displayed with leading zeros, unless LeadingZero is set to false.
  • Here's the simple JavaScript countdown/count-up code (copy and paste to your Web page):
Note from Eileen:  you'll need to change the [ to < and the ] to > every time they appear--keeping the code as code just added the timer to this post

[script language="JavaScript"]

TargetDate = "12/31/2020 5:00 AM";
BackColor = "palegreen";
ForeColor = "navy";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
FinishMessage = "It is finally here!";
[script language="JavaScript" src=http://scripts.hashemian.com/js/countdown.js][/script]

See the top right of my blog for what this looks like with days only, Verdana font size 30
  • Countdown FAQ
  • Please consider putting the script on your own site and save him (me too!) from high usage warnings.
  • Since this countdown/count-up runs on the client browser, it's best to append to the target date the appropriate UTC (Universal Time Coordinates) offset for the location of your event.
  • For example, if the sample code above is for US Eastern Standard Time, you'd specify TargetDate as:
  • "12/31/2020 5:00 AM UTC-0500". This way an accurate countdown is displayed for all users regardless of their geographic location. Thanks to Justin Carter for the tip.
  • Mun Rashid has modified the JavaScript code by using object wrapping to allow for multiple countdowns on one page. Download Mun's JavaScript code here. Download the sample HTML here.
  • Tilesh Khatri has written a simplified script based on the countdown code that displays multiple clocks on one page. Download the HTML.
  • (Go to the page I got this from for the above two links)
  • To reset the clock and count up with every page visit set TargetDate to "new Date();" and CountStepper to "1". This will effectively show visit duration. Leave out the double-quotes.

No comments: