Compare commits
5 Commits
1dc5b59414
...
2cf33ba2d8
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
2cf33ba2d8 | ||
|
|
1a8c50d1ee | ||
|
|
01abfe90ac | ||
|
|
6c92b71e79 | ||
|
|
d8da68595e |
22
.editorconfig
Normal file
22
.editorconfig
Normal file
@@ -0,0 +1,22 @@
|
||||
# Cross-platform formatting config
|
||||
# See https://EditorConfig.org
|
||||
|
||||
# top-most EditorConfig file
|
||||
root = true
|
||||
|
||||
# Unix-style newlines with a newline ending every file
|
||||
[*]
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
|
||||
[{*.{js,json,css,scss,html,jsx},.babelrc}]
|
||||
# Set default charset
|
||||
charset = utf-8
|
||||
# 4 space indentation
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
|
||||
[*.{yml,yaml}]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
|
||||
@@ -1,36 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.3.11/d3.min.js"></script>
|
||||
<link href='http://fonts.googleapis.com/css?family=Chango' rel='stylesheet' type='text/css'>
|
||||
<style>
|
||||
body {
|
||||
font-family: Chango;
|
||||
text-align: center;
|
||||
}
|
||||
div#counter {
|
||||
font-size: 180pt;
|
||||
text-align: left;
|
||||
}
|
||||
div#location {
|
||||
font-size: 50pt;
|
||||
}
|
||||
div.hours { color: blue; }
|
||||
div.minutes { color: green; }
|
||||
div.seconds { color: orange; }
|
||||
div.countdown { color: red; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<div id="counter"></div>
|
||||
until 1st January 2014 in
|
||||
<div id="location"></div>
|
||||
<div>at <span id="localtime"></span> local time</div>
|
||||
<div id="map"></div>
|
||||
|
||||
<script src="countdown.js">
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
130
countdown.js
130
countdown.js
@@ -1,130 +0,0 @@
|
||||
var events = [
|
||||
{ time: new Date("Tue 31 Dec 2013 10:00:00 GMT"), country: "Christmas Island/Kiribati and Samoa", city: "Kiritimati, Apia" },
|
||||
{ time: new Date("Tue 31 Dec 2013 10:15:00 GMT"), country: "Chatham Islands/New Zealand", city: "Chatham Islands" },
|
||||
{ time: new Date("Tue 31 Dec 2013 11:00:00 GMT"), country: "New Zealand with exceptions and 5 more", city: "Auckland, Suva, Wellington, Nukualofa" },
|
||||
{ time: new Date("Tue 31 Dec 2013 12:00:00 GMT"), country: "small region of Russia, Marshall Islands and 5 more", city: "Anadyr, Funafuti, Yaren, Tarawa" },
|
||||
{ time: new Date("Tue 31 Dec 2013 12:30:00 GMT"), country: "Norfolk Island", city: "Kingston" },
|
||||
{ time: new Date("Tue 31 Dec 2013 13:00:00 GMT"), country: "much of Australia and 5 more", city: "Melbourne, Sydney, Canberra, Honiara" },
|
||||
{ time: new Date("Tue 31 Dec 2013 13:30:00 GMT"), country: "small region of Australia", city: "Adelaide, Broken Hill" },
|
||||
{ time: new Date("Tue 31 Dec 2013 14:00:00 GMT"), country: "Queensland/Australia and 5 more", city: "Brisbane, Port Moresby, Guam (Hagåtña), Cairns" },
|
||||
{ time: new Date("Tue 31 Dec 2013 14:30:00 GMT"), country: "Northern Territory/Australia", city: "Darwin, Alice Springs, Uluru" },
|
||||
{ time: new Date("Tue 31 Dec 2013 15:00:00 GMT"), country: "Japan and 6 more", city: "Tokyo, Seoul, Pyongyang, Dili" },
|
||||
{ time: new Date("Tue 31 Dec 2013 15:15:00 GMT"), country: "Western Australia/Australia", city: "Eucla" },
|
||||
{ time: new Date("Tue 31 Dec 2013 16:00:00 GMT"), country: "China and 12 more", city: "Beijing, Hong Kong, Manila, Singapore" },
|
||||
{ time: new Date("Tue 31 Dec 2013 17:00:00 GMT"), country: "much of Indonesia, Thailand and 7 more", city: "Jakarta, Bangkok, Hanoi, Phnom Penh" },
|
||||
{ time: new Date("Tue 31 Dec 2013 17:30:00 GMT"), country: "Myanmar and Cocos Islands", city: "Yangon, Naypyidaw, Mandalay, Bantam" },
|
||||
{ time: new Date("Tue 31 Dec 2013 18:00:00 GMT"), country: "Bangladesh, some regions of Russia and 4 more", city: "Dhaka, Almaty, Bishkek, Thimphu" },
|
||||
{ time: new Date("Tue 31 Dec 2013 18:15:00 GMT"), country: "Nepal", city: "Kathmandu, Biratnagar, Pokhara" },
|
||||
{ time: new Date("Tue 31 Dec 2013 18:30:00 GMT"), country: "India and Sri Lanka", city: "New Delhi, Mumbai, Kolkata, Bangalore" },
|
||||
{ time: new Date("Tue 31 Dec 2013 19:00:00 GMT"), country: "Pakistan and 8 more", city: "Tashkent, Islamabad, Lahore, Karachi" },
|
||||
{ time: new Date("Tue 31 Dec 2013 19:30:00 GMT"), country: "Afghanistan", city: "Kabul, Kandahar, Mazari Sharif, Herat" },
|
||||
{ time: new Date("Tue 31 Dec 2013 20:00:00 GMT"), country: "much of Russia and 8 more", city: "Moscow, Dubai, Abu Dhabi, Muscat" },
|
||||
{ time: new Date("Tue 31 Dec 2013 20:30:00 GMT"), country: "Iran", city: "Tehran, Rasht, Esfahãn, Bandar-Abbas" },
|
||||
{ time: new Date("Tue 31 Dec 2013 21:00:00 GMT"), country: "Iraq and 20 more", city: "Baghdad, Khartoum, Nairobi, Addis Ababa" },
|
||||
{ time: new Date("Tue 31 Dec 2013 22:00:00 GMT"), country: "Greece and 30 more", city: "Cairo, Ankara, Athens, Bucharest" },
|
||||
{ time: new Date("Tue 31 Dec 2013 23:00:00 GMT"), country: "Germany and 43 more", city: "Brussels, Madrid, Paris, Rome" },
|
||||
{ time: new Date("Wed 1 Jan 2014 00:00:00 GMT"), country: "United Kingdom and 24 more", city: "London, Casablanca, Dublin, Lisbon" },
|
||||
|
||||
{ time: new Date("Wed 1 Jan 2014 1:00:00 GMT"), country: "Cape Verde, some regions of Greenland and 1 more", city: "Praia, Ponta Delgada (Azores), Ittoqqortoormiit, Mindelo" },
|
||||
{ time: new Date("Wed 1 Jan 2014 2:00:00 GMT"), country: "regions of Brazil, Uruguay and 1 more", city: "Rio de Janeiro, São Paulo, Brasilia, Wed 1 Jan 2014tevideo" },
|
||||
{ time: new Date("Wed 1 Jan 2014 3:00:00 GMT"), country: "regions of Brazil, Argentina and 7 more", city: "Buenos Aires, Santiago, Asuncion, Paramaribo" },
|
||||
{ time: new Date("Wed 1 Jan 2014 3:30:00 GMT"), country: "Newfoundland and Labrador/Canada", city: "St. John's, Conception Bay South, Corner Brook, Gander" },
|
||||
{ time: new Date("Wed 1 Jan 2014 4:00:00 GMT"), country: "some regions of Canada and 26 more", city: "La Paz, San Juan, Santo Domingo, Halifax" },
|
||||
{ time: new Date("Wed 1 Jan 2014 4:30:00 GMT"), country: "Venezuela", city: "Caracas, Barquisimeto, Maracaibo, Maracay" },
|
||||
{ time: new Date("Wed 1 Jan 2014 5:00:00 GMT"), country: "regions of U.S.A., regions of Canada and 12 more", city: "New York, Washington DC, Detroit, Havana" },
|
||||
{ time: new Date("Wed 1 Jan 2014 6:00:00 GMT"), country: "regions of U.S.A., some regions of Canada and 8 more", city: "Mexico City, Chicago, Guatemala, Dallas" },
|
||||
{ time: new Date("Wed 1 Jan 2014 7:00:00 GMT"), country: "some regions of U.S.A., some regions of Canada and 1 more", city: "Calgary, Denver, Edmonton, Phoenix" },
|
||||
{ time: new Date("Wed 1 Jan 2014 8:00:00 GMT"), country: "regions of U.S.A., some regions of Canada and 2 more", city: "Los Angeles, San Francisco, Las Vegas, Seattle" },
|
||||
{ time: new Date("Wed 1 Jan 2014 9:00:00 GMT"), country: "Alaska/U.S.A. and French Polynesia", city: "Anchorage, Fairbanks, Unalaska, Juneau" },
|
||||
{ time: new Date("Wed 1 Jan 2014 9:30:00 GMT"), country: "Marquesas Islands/France", city: "Taiohae" },
|
||||
{ time: new Date("Wed 1 Jan 2014 10:00:00 GMT"), country: "small region of U.S.A. and 2 more", city: "Honolulu, Rarotonga, Adak, Papeete" },
|
||||
{ time: new Date("Wed 1 Jan 2014 11:00:00 GMT"), country: "American Samoa, Midway Atoll/U.S.A. and 1 more", city: "Alofi, Midway, Pago Pago" },
|
||||
{ time: new Date("Wed 1 Jan 2014 12:00:00 GMT"), country: "small region of U.S.A.", city: "Baker Island, Howland Island" },
|
||||
];
|
||||
/*
|
||||
var events = [
|
||||
{ time: new Date("Tue 31 Dec 2013 1:00:00 GMT"), country: "Cape Verde, some regions of Greenland and 1 more", city: "Praia, Ponta Delgada (Azores), Ittoqqortoormiit, Mindelo" },
|
||||
{ time: new Date("Tue 31 Dec 2013 2:00:00 GMT"), country: "regions of Brazil, Uruguay and 1 more", city: "Rio de Janeiro, São Paulo, Brasilia, Tue 31 Dec 2013tevideo" },
|
||||
{ time: new Date("Tue 31 Dec 2013 2:30:00 GMT"), country: "regions of Brazil, Argentina and 7 more", city: "Buenos Aires, Santiago, Asuncion, Paramaribo" },
|
||||
{ time: new Date("Tue 31 Dec 2013 2:45:00 GMT"), country: "Newfoundland and Labrador/Canada", city: "St. John's, Conception Bay South, Corner Brook, Gander" },
|
||||
];
|
||||
*/
|
||||
var now = new Date().getTime();
|
||||
var secsRemaining = 0;
|
||||
var nextEvent;
|
||||
var counter = document.getElementById("counter");
|
||||
var loc = document.getElementById("location");
|
||||
var time = document.getElementById("localtime");
|
||||
|
||||
var countDownSound = new Audio('get-ready.ogg');
|
||||
|
||||
|
||||
|
||||
function pad(num) {
|
||||
return (num<10? "0"+num : ""+num);
|
||||
}
|
||||
|
||||
function counterClass(millisecsRemaining) {
|
||||
if (millisecsRemaining > 3600000) return "hours";
|
||||
if (millisecsRemaining > 60000) return "minutes";
|
||||
if (millisecsRemaining > 10000) return "seconds";
|
||||
return "countdown";
|
||||
}
|
||||
|
||||
function timeRemaining(millisecsRemaining) {
|
||||
// var days = Math.floor(millisecsRemaining / millisInDay)
|
||||
// millisecsRemaining -= days * millisInDay
|
||||
|
||||
var hours = Math.floor(millisecsRemaining / 3600000)
|
||||
millisecsRemaining -= hours * 3600000
|
||||
|
||||
var mins = Math.floor(millisecsRemaining / 60000)
|
||||
millisecsRemaining -= mins * 60000
|
||||
|
||||
var secs = Math.round(millisecsRemaining / 1000)
|
||||
return hours+":"+pad(mins)+":"+pad(secs)
|
||||
}
|
||||
|
||||
var playing = false;
|
||||
function handleTick(now) {
|
||||
console.log(now, now.getMilliseconds());
|
||||
|
||||
while (!nextEvent || nextEvent.time <= now) {
|
||||
if (events.length == 0) return;
|
||||
|
||||
nextEvent = events.shift();
|
||||
}
|
||||
|
||||
|
||||
var millisecsRemaining = nextEvent.time.getTime() - now.getTime();
|
||||
var excl = millisecsRemaining < 1000*5? "!" : "";
|
||||
|
||||
console.log("seconds",now.getSeconds());
|
||||
if (millisecsRemaining < 2*60*1000) {
|
||||
if (!playing) {
|
||||
countDownSound.play();
|
||||
playing = true;
|
||||
}
|
||||
}
|
||||
else
|
||||
// resets the announcement
|
||||
playing = false;
|
||||
|
||||
counter.innerHTML = timeRemaining(millisecsRemaining);
|
||||
loc.innerHTML = nextEvent.city;
|
||||
time.innerHTML = nextEvent.time.toLocaleFormat("%I:%M %p")
|
||||
counter.className = counterClass(millisecsRemaining);
|
||||
}
|
||||
|
||||
function ticker() {
|
||||
|
||||
var now = new Date();
|
||||
handleTick(now);
|
||||
|
||||
var millis = now.getMilliseconds()
|
||||
var millisTilNextSecond = 1000-millis;
|
||||
setTimeout(ticker, millisTilNextSecond);
|
||||
}
|
||||
|
||||
ticker();
|
||||
|
||||
11
package.json
Normal file
11
package.json
Normal file
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"name": "new-year-countdown",
|
||||
"version": "1.0.0",
|
||||
"description": "Count down each New Year's arrival around the world",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC"
|
||||
}
|
||||
303
www/countdown.js
Normal file
303
www/countdown.js
Normal file
@@ -0,0 +1,303 @@
|
||||
// This is deliberately browser-compatible JS, so we avoid fat arrows etc.
|
||||
|
||||
var locale = "EN-GB";
|
||||
var now = new Date();
|
||||
var nextNewYearUTC = new Date(Date.UTC(now.getFullYear()+1, 0, 1));
|
||||
var secsRemaining = 0;
|
||||
var nextZone;
|
||||
var counter = document.getElementById("counter");
|
||||
var loc = document.getElementById("location");
|
||||
var time = document.getElementById("localtime");
|
||||
var untilDate = document.getElementById("until-date");
|
||||
|
||||
var countDownSound = new Audio('get-ready.ogg');
|
||||
|
||||
// Convert the next new year time to 'date, hours:mins:secs' in the target timezone
|
||||
function zoneTime(zone, refTime) {
|
||||
return refTime.toLocaleString('EN-US', {
|
||||
hour: '2-digit',
|
||||
hour12: false,
|
||||
minute: '2-digit',
|
||||
second: '2-digit',
|
||||
year: 'numeric',
|
||||
month: 'numeric',
|
||||
day: 'numeric',
|
||||
timeZone: zone,
|
||||
});
|
||||
}
|
||||
|
||||
function zoneOffsetMillis(timestr, baseDate) {
|
||||
var v = timestr.split(/[/ :,]+/)
|
||||
.map(function(str) { return Number(str); });
|
||||
var date = new Date(v[2],v[0]-1,v[1],v[3],v[4],v[5]);
|
||||
return date.valueOf() - baseDate.valueOf();
|
||||
}
|
||||
|
||||
// Compile a list of timezones from Intl.supportedValuesOf
|
||||
var zones = Intl.supportedValuesOf('timeZone')
|
||||
.map(function(zone) { return {
|
||||
zone: zone,
|
||||
offset: zoneOffsetMillis(zoneTime(zone, nextNewYearUTC), nextNewYearUTC)
|
||||
}; })
|
||||
.sort(function(a,b) { return b.offset - a.offset; });
|
||||
|
||||
// Now concoct an index of timezone hour offsets to timezone info.
|
||||
// Each zone has:
|
||||
// { abbrevs, offset, hOffset, nydDate }
|
||||
var zoneIndex = zones
|
||||
.reduce((a, v) => {
|
||||
var hOffset = v.offset/3600000;
|
||||
var zoneInfo = a[hOffset];
|
||||
if (zoneInfo)
|
||||
zoneInfo.abbrevs.push(v.zone);
|
||||
else {
|
||||
a[hOffset] = {
|
||||
abbrevs: [v.zone],
|
||||
offset: v.offset,
|
||||
hOffset: hOffset,
|
||||
nydDate: new Date(nextNewYearUTC.valueOf() + v.offset),
|
||||
};
|
||||
}
|
||||
return a;
|
||||
}, {});
|
||||
console.debug(nextNewYearUTC, zoneIndex);
|
||||
|
||||
// This info is just used to say what cities / countries are in the timezone
|
||||
var zoneInfo = {
|
||||
"-12": {
|
||||
country: "small region of U.S.A.",
|
||||
city: "Baker Island, Howland Island"
|
||||
},
|
||||
"-11": {
|
||||
country: "American Samoa, Midway Atoll/U.S.A. and 1 more",
|
||||
city: "Alofi, Midway, Pago Pago"
|
||||
},
|
||||
"-10": {
|
||||
country: "Cook Islands, small region of U.S.A. and 2 more",
|
||||
city: "Honolulu, Rarotonga, Adak, Papeete"
|
||||
},
|
||||
"-9.5": {
|
||||
country: "French Polynesia, Marquesas Islands",
|
||||
city: "Taiohae"
|
||||
},
|
||||
"-9": {
|
||||
country: "Alaska/U.S.A. and French Polynesia",
|
||||
city: "Anchorage, Fairbanks, Unalaska, Juneau"
|
||||
},
|
||||
"-8": {
|
||||
country: "Pitcairn Islands, regions of U.S.A. Mexico, and Canada",
|
||||
city: "Los Angeles, San Francisco, Las Vegas, Seattle"
|
||||
},
|
||||
"-7": {
|
||||
country: "some regions of U.S.A., Mexico, some regions of Canada",
|
||||
city: "Calgary, Denver, Edmonton, Phoenix"
|
||||
},
|
||||
"-6": {
|
||||
country: "Belize, regions of U.S.A., Mexico, some regions of Canada and 8 more",
|
||||
city: "Mexico City, Chicago, Guatemala, Dallas"
|
||||
},
|
||||
"-5": {
|
||||
country: "regions of U.S.A., regions of Canada and 12 more",
|
||||
city: "New York, Washington DC, Detroit, Havana"
|
||||
},
|
||||
"-4": {
|
||||
country: "Venezuela",
|
||||
city: "Caracas, Barquisimeto, Maracaibo, Maracay"
|
||||
},
|
||||
"-3.5": {
|
||||
country: "Newfoundland and Labrador/Canada",
|
||||
city: "St. John's, Conception Bay South, Corner Brook, Gander"
|
||||
},
|
||||
"-3": {
|
||||
country: "regions of Brazil, Argentina and 7 more",
|
||||
city: "Buenos Aires, Santiago, Asuncion, Paramaribo"
|
||||
},
|
||||
"-2": {
|
||||
country: "South Georgia and the South Sandwich Islands",
|
||||
city: "Grytviken",
|
||||
},
|
||||
"-1": {
|
||||
country: "Cape Verde, some regions of Greenland and 1 more",
|
||||
city: "Praia, Ponta Delgada (Azores), Ittoqqortoormiit, Mindelo"
|
||||
},
|
||||
"0": {
|
||||
country: "United Kingdom and 24 more",
|
||||
city: "London, Casablanca, Dublin, Lisbon"
|
||||
},
|
||||
"1": {
|
||||
country: "Germany and 43 more",
|
||||
city: "Brussels, Madrid, Paris, Rome"
|
||||
},
|
||||
"2": {
|
||||
country: "Greece and 30 more",
|
||||
city: "Cairo, Ankara, Athens, Bucharest"
|
||||
},
|
||||
"3": {
|
||||
country: "Iraq and 20 more",
|
||||
city: "Baghdad, Khartoum, Nairobi, Addis Ababa"
|
||||
},
|
||||
"3.5": {
|
||||
country: "Iran",
|
||||
city: "Tehran, Rasht, Esfahãn, Bandar-Abbas"
|
||||
},
|
||||
"4": {
|
||||
country: "UAE, parts of Russia, Georgia, Armenia, Mauritius",
|
||||
city: "Tblisi, Dubai, Abu Dhabi",
|
||||
},
|
||||
"4.5": {
|
||||
country: "Afghanistan",
|
||||
city: "Kabul, Kandahar, Mazari Sharif, Herat"
|
||||
},
|
||||
"5": {
|
||||
country: "Pakistan and 8 more",
|
||||
city: "Tashkent, Islamabad, Lahore, Karachi"
|
||||
},
|
||||
"5.5": {
|
||||
country: "India and Sri Lanka",
|
||||
city: "New Delhi, Mumbai, Kolkata, Bangalore"
|
||||
},
|
||||
"5.75": {
|
||||
country: "Nepal",
|
||||
city: "Kathmandu, Biratnagar, Pokhara"
|
||||
},
|
||||
"6": {
|
||||
country: "Bangladesh, some regions of Russia and 4 more",
|
||||
city: "Dhaka, Almaty, Bishkek, Thimphu"
|
||||
},
|
||||
"6.5": {
|
||||
country: "Myanmar and Cocos Islands",
|
||||
city: "Yangon, Naypyidaw, Mandalay, Bantam"
|
||||
},
|
||||
"7": {
|
||||
country: "much of Indonesia, Thailand and 7 more",
|
||||
city: "Jakarta, Bangkok, Hanoi, Phnom Penh"
|
||||
},
|
||||
"8": {
|
||||
country: "China and 12 more",
|
||||
city: "Beijing, Hong Kong, Manila, Singapore"
|
||||
},
|
||||
"8.75": {
|
||||
country: "Western Australia/Australia",
|
||||
city: "Eucla"
|
||||
},
|
||||
"9": {
|
||||
country: "Japan and 6 more",
|
||||
city: "Tokyo, Seoul, Pyongyang, Dili"
|
||||
},
|
||||
"9.5": {
|
||||
country: "Northern Territory/Australia",
|
||||
city: "Darwin, Alice Springs, Uluru"
|
||||
},
|
||||
"10": {
|
||||
country: "Queensland/Australia and 5 more",
|
||||
city: "Brisbane, Port Moresby, Guam (Hagåtña), Cairns"
|
||||
},
|
||||
"10.5": {
|
||||
country: "small region of Australia",
|
||||
city: "Adelaide, Broken Hill"
|
||||
},
|
||||
"11": {
|
||||
country: "Vanuatu, Solomon Islands, much of Australia and 5 more",
|
||||
city: "Melbourne, Sydney, Canberra, Honiara"
|
||||
},
|
||||
"12": {
|
||||
country: "Kiribati, Marshall Islands, Norfolk Island, Tuvalu, Fiji",
|
||||
city: "Kingston",
|
||||
},
|
||||
"13": {
|
||||
country: "New Zealand with exceptions and 5 more",
|
||||
city: "Auckland, Suva, Wellington, Nukualofa"
|
||||
},
|
||||
"13.75": {
|
||||
country: "Chatham Islands/New Zealand",
|
||||
city: "Chatham Islands"
|
||||
},
|
||||
};
|
||||
console.debug(zoneInfo);
|
||||
|
||||
var zoneOrder = Object.keys(zoneIndex)
|
||||
.map(Number)
|
||||
.sort(function(a,b) { return a-b; });
|
||||
console.debug(zoneOrder);
|
||||
|
||||
function pad(num) {
|
||||
return (num<10? "0"+num : ""+num);
|
||||
}
|
||||
|
||||
function counterClass(millisecsRemaining) {
|
||||
if (millisecsRemaining > 3600000) return "hours";
|
||||
if (millisecsRemaining > 60000) return "minutes";
|
||||
if (millisecsRemaining > 10000) return "seconds";
|
||||
return "countdown";
|
||||
}
|
||||
|
||||
function timeRemaining(millisecsRemaining) {
|
||||
// var days = Math.floor(millisecsRemaining / millisInDay)
|
||||
// millisecsRemaining -= days * millisInDay
|
||||
|
||||
var hours = Math.floor(millisecsRemaining / 3600000)
|
||||
millisecsRemaining -= hours * 3600000
|
||||
|
||||
var mins = Math.floor(millisecsRemaining / 60000)
|
||||
millisecsRemaining -= mins * 60000
|
||||
|
||||
var secs = Math.round(millisecsRemaining / 1000)
|
||||
return hours+"h "+pad(mins)+"m "+pad(secs)+"s"
|
||||
}
|
||||
|
||||
var playing = false;
|
||||
function handleTick(now) {
|
||||
console.debug(now, now.getMilliseconds());
|
||||
|
||||
while (!nextZone || zoneIndex[nextZone].nydDate <= now) {
|
||||
if (zoneOrder.length == 0) return;
|
||||
|
||||
nextZone = zoneOrder.shift();
|
||||
console.debug("next up: zone", nextZone);
|
||||
}
|
||||
|
||||
var millisecsRemaining = zoneIndex[nextZone].nydDate.getTime() - now.getTime();
|
||||
var excl = millisecsRemaining < 1000*5? "!" : "";
|
||||
|
||||
console.debug("seconds",now.getSeconds());
|
||||
if (millisecsRemaining < 2*60*1000) {
|
||||
if (!playing) {
|
||||
countDownSound.play();
|
||||
playing = true;
|
||||
}
|
||||
}
|
||||
else
|
||||
// resets the announcement
|
||||
playing = false;
|
||||
|
||||
var info = zoneInfo[nextZone];
|
||||
var zone = zoneIndex[nextZone];
|
||||
|
||||
untilDate.innerHTML = nextNewYearUTC.toLocaleDateString(locale, {
|
||||
weekday: "long",
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
});
|
||||
counter.innerHTML = timeRemaining(millisecsRemaining);
|
||||
loc.innerHTML = info? info.city || info.country : zone.abbrev[0];
|
||||
|
||||
time.innerHTML = zone.nydDate.toLocaleDateString(locale, {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
second: "2-digit",
|
||||
});
|
||||
counter.className = counterClass(millisecsRemaining);
|
||||
}
|
||||
|
||||
function ticker() {
|
||||
var now = new Date();
|
||||
handleTick(now);
|
||||
|
||||
var millis = now.getMilliseconds()
|
||||
var millisTilNextSecond = 1000-millis;
|
||||
setTimeout(ticker, millisTilNextSecond);
|
||||
}
|
||||
|
||||
ticker();
|
||||
|
||||
36
www/index.html
Normal file
36
www/index.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<html>
|
||||
<head>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/7.8.0/d3.min.js"></script>
|
||||
<link href='http://fonts.googleapis.com/css?family=Chango' rel='stylesheet' type='text/css'>
|
||||
<style>
|
||||
body {
|
||||
font-family: Chango;
|
||||
text-align: center;
|
||||
}
|
||||
div#counter {
|
||||
font-size: 100pt;
|
||||
text-align: left;
|
||||
}
|
||||
div#location {
|
||||
font-size: 50pt;
|
||||
}
|
||||
div.hours { color: blue; }
|
||||
div.minutes { color: green; }
|
||||
div.seconds { color: orange; }
|
||||
div.countdown { color: red; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<div id="counter"></div>
|
||||
until <span id="until-date"></span> in
|
||||
<div id="location"></div>
|
||||
<div>at <span id="localtime"></span> local time</div>
|
||||
<div id="map"></div>
|
||||
|
||||
<script src="countdown.js"></script>
|
||||
|
||||
<!--iframe width="645" height="363" src="https://www.youtube.com/embed/gG0yjQ47IZU" title="FREE DOWNLOAD - 10 Seconds Countdown Timer With Voice #Shorts" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe-->
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user