This widget sets up a repeating daily countdown on a page.
Usage[]
There are two steps to using the widget. The first is to set up one or more <span>s where you want the timer to be displayed as follows:
<span class="[name]"></span>
where [name] should be replaced with any word or phrase that you choose to identify the timer, though as it is a CSS class name, it must be valid as a CSS identifier.
You can display the same time at multiple spots on the page by using the empty span above multiple times with the same class.
The second step is to actually run the timer by placing this on the page. It's recommended to place this at the bottom of the page.
{{#widget:Repeating daily countdown
|name=[name]
|zone=[zone]
|hour=[hour]
|minute=[minute]
}}
Where:
[name]should be replaced with the same name used as the class in the relevant<span>s[zone]should be a valid timezone identifier from this list[hour]should be replaced with the hour in 24-hour time (from 0 to 23)[minute]should be replaced with the minute from 0 to 59
Note that identifying the correct timezone of the event time is vital for allowing the timer to correctly cope with daylight savings time.
It is possible to use this widget more than once to support countdowns to multiple events on a single page. They will need unique names, however; using the same name will set up a race condition where one timer will overwrite the others every minute. But be advised that the widget is not optimized for running a lot of timers on the same page; it's probably best to keep the number below ten. (This does not apply to using multiple spans for the same timer since that adds little overhead.)
Example[]
The following code below sets up a countdown timer for noon in the US Pacific time zone.
<span class="example"></span>
{{#widget:Repeating daily countdown
|name=example
|zone=America/Los_Angeles
|hour=12
|minute=0
}}
{{#widget:Repeating daily countdown
|name=example |zone=America/Los_Angeles |hour=12 |minute=0
}}