{"id":68,"date":"2010-10-21T16:56:30","date_gmt":"2010-10-21T15:56:30","guid":{"rendered":"http:\/\/www.monkeyshines.co.uk\/blog\/?p=68"},"modified":"2010-10-21T16:56:30","modified_gmt":"2010-10-21T15:56:30","slug":"countdown-timer-javascript","status":"publish","type":"post","link":"https:\/\/monkeyshines.co.uk\/blog\/countdown-timer-javascript\/","title":{"rendered":"Countdown Timer &#8211; JavaScript"},"content":{"rendered":"<div class='content_text'>\n<form id='countdown' action='post'>\n<fieldset>\n      Countdown to<br \/>\n      <select name='target_day' onchange='restart_countdown(document.getElementById(\"countdown\").target_day.value)'><option value='March 20'>Binky&#8217;s Birthday<\/option><option value='October 13, 2010'>First Blog Post Here<\/option><option value='December 25' selected='selected'>Christmas<\/option><\/select>: <br \/>\n      <span id='countdown_message'><\/span><br \/>\n    <\/fieldset>\n<\/p><\/form>\n<\/div>\n<p>\nThe JavaScript demonstrated here (<a href='\/js\/countdown.js'>countdown.js<\/a>) can countdown to a particular date. If the date is annually recurring (e.g. a birthday), then it&#8217;ll countdown to the next occurence; if it&#8217;s a specific year (e.g. a holiday, in the vacation sense of the word), when the date has passed it&#8217;ll show the time elapsed since that date. It counts down to a fraction of a second after midnight on the given day (JavaScript gets it&#8217;s time information from the client&#8217;s clock).\n<\/p>\n<p>\nThis isn&#8217;t particularly novel, and much of the code is copied, merged, and adapted from other similar scripts on the web (none of which did exactly what I wanted). I haven&#8217;t seen another script that takes a date and automatically works out whether it&#8217;s annually recurring, and if not, whether to count down or up, but I daresay it&#8217;s been done many times over. The script is heavily dependent on giving it a date in the right format, &#8220;Month Day_of_Month[, Year]&#8221;, where Month should be specified<br \/>\nas text to avoid any confusion about the order of date components. Not an issue with a list box, but if you let users enter data in text boxes you&#8217;ll have to do a bunch of checking and formatting, which is altogether too tedious for me to have bothered with.\n<\/p>\n<p>\nI don&#8217;t think the script needs much commentary &#8211; it works out when the day is in relation to today and does some simple maths to display that information in a human-readable format. JavaScript works in milliseconds, which is why we divide by 1000 in various places. The script is actually pretty wordy because I find JavaScript counter-intuitive, and tend towards clarity rather than brevity; but if you prefer the latter it&#8217;d be easy to condense it.\n<\/p>\n<p>\nIt&#8217;s easy to <a href='\/ahkb\/countdown.html'>add a little pizazz to the countdown<\/a> by displaying a picture relevant to the date selected, just change the src of the image when the user selects from the list box.\n<\/p>\n<p><script src='\/js\/countdown.js' type='text\/javascript'><\/script><br \/>\n<script  type='text\/javascript'>\nwindow.onload = restart_countdown(document.getElementById(\"countdown\").target_day.value)\n<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Countdown to Binky&#8217;s BirthdayFirst Blog Post HereChristmas: The JavaScript demonstrated here (countdown.js) can countdown to a particular date. If the date is annually recurring (e.g. a birthday), then it&#8217;ll countdown to the next occurence; if it&#8217;s a specific year (e.g. a holiday, in the vacation sense of the word), when the date has passed it&#8217;ll [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[14],"class_list":["post-68","post","type-post","status-publish","format-standard","hentry","category-coding","tag-javascript"],"_links":{"self":[{"href":"https:\/\/monkeyshines.co.uk\/blog\/wp-json\/wp\/v2\/posts\/68","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/monkeyshines.co.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/monkeyshines.co.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/monkeyshines.co.uk\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/monkeyshines.co.uk\/blog\/wp-json\/wp\/v2\/comments?post=68"}],"version-history":[{"count":33,"href":"https:\/\/monkeyshines.co.uk\/blog\/wp-json\/wp\/v2\/posts\/68\/revisions"}],"predecessor-version":[{"id":101,"href":"https:\/\/monkeyshines.co.uk\/blog\/wp-json\/wp\/v2\/posts\/68\/revisions\/101"}],"wp:attachment":[{"href":"https:\/\/monkeyshines.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=68"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/monkeyshines.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=68"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/monkeyshines.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=68"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}