CSS Codes
CSS Layouts

<html>
<head>

<style style="text/css">

/* Demo Styles */

.unicount{
margin-top: 1em;
}

.lcdstyle{ /*Example CSS to create LCD countdown look*/
background-color:black;
color:lime;
font: bold 22px MS Sans Serif;
padding: 3px;
display: inline-block;
}

.lcdstyle sup{ /*Example CSS to create LCD countdown look*/
font-size: 80%
}

</style>

<script src="moment.min.js"></script>
<script src="moment-timezone-with-data.min.js"></script>

<script src="universalcountdown.js">

/***********************************************
* Universal Countdown script- By Dynamic Drive (http://www.dynamicdrive.com)
* Please keep this notice intact
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

</script>
</head>

<body>

 

<h1>Example 1</h1>

<div class="unicount">
<span id="nylondon2019"></span> left until New Years 2019 in London, England
</div>

<script>

var newyearsdiv = document.getElementById("nylondon2019")
var cd1 = new countDownLocalTime("2019-01-01 00:00:00", "Europe/London")
cd1.oncountdown = function(ms){
if (ms <= 0){ // if time's up
alert("2019 New Years is Upon Us in London!") // do something
}
else{
var timeleft = countDownLocalTime.formatDuration(ms, "days") // format time using formatDuration(timeleftms, "baseunit") function
newyearsdiv.innerHTML = timeleft.days + ' Days ' + timeleft.hours + ' Hours ' + timeleft.minutes + ' Minutes ' + timeleft.seconds + ' Seconds '
}
}
cd1.start()

</script>


<h1>Example 2</h1>


<div class="unicount">
<span id="christmasvan" style="font-weight:bold"></span> left until Christmas 2018 in Vancouver, BC
</div>

<script>

var christmasdiv = document.getElementById("christmasvan")
var cd2 = new countDownLocalTime("2018-12-25 00:00:00", "America/Vancouver")
cd2.oncountdown = function(ms){
if (ms <= 0){ // if time's up
alert("2018 Christmas is Upon Us in Vancouver!") // do something
}
else{
var timeleft = moment.duration(ms) // format time using moment.js Durations object http://momentjs.com/docs/#/durations/
christmasdiv.innerHTML = timeleft.humanize() // just humanize time left
}
}
cd2.start()

</script>


<h1>Example 3</h1>
<div class="unicount">
<span id="tokyoolympics" class="lcdstyle"></span>
</div>
<div>Tokyo Olympics Countdown (Aug 9th, 2020 Tokyo Time)</div>

<script>

var tokyodiv = document.getElementById("tokyoolympics")
var cd3 = new countDownLocalTime("2020-09-09 00:00:00", "Asia/Tokyo")
cd3.oncountdown = function(ms){
var output = ''
if (ms <= 0){ // if time's up
output = "Tokyo Olympics Starts Today!!"
}
else{
var timeleft = moment.duration(ms) // format time using moment.js Durations object http://momentjs.com/docs/#/durations/
if (timeleft.years() > 0) output += timeleft.years() + ' <sup>years</sup> ' // show years left
output += timeleft.months() + ' <sup>months</sup> ' // show months left (0-11) http://momentjs.com/docs/#/durations/months/
output += timeleft.days() + ' <sup>days</sup> ' // show days left (0-30)
output += timeleft.hours() + ' <sup>hours</sup> ' // show hours left (0-24)
output += timeleft.minutes() + ' <sup>minutes</sup> ' // show minutes left (0-59)
output += timeleft.seconds() + ' <sup>seconds</sup> ' // show seconds left (0-59)
}
tokyodiv.innerHTML = output
}
cd3.start()

</script>

</body>

</html>