Last active
August 29, 2015 14:05
-
-
Save kyledinh/ca1119c55f9f60da904d to your computer and use it in GitHub Desktop.
Countdowner with xhr call
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html lang="en"> | |
<head> | |
<meta charset="utf-8" /> | |
<title></title> | |
</head> | |
<body> | |
<h2><span id="countdown_clock"></span></h2> | |
<p>This is a countdown clock</p> | |
<script> | |
var Util = {}; | |
Util.initAjax = function(uri, callback) { | |
var ajax = new Util.ajaxRequest(); | |
ajax.onreadystatechange = function() { | |
if (ajax.readyState == 4 && ajax.status == 200) { | |
var jsondata = JSON.parse(ajax.responseText); | |
if (callback) { | |
callback(jsondata); | |
} | |
} | |
} | |
ajax.open("GET", uri, true); | |
ajax.send(null); | |
}; | |
Util.ajaxRequest = function() { | |
var activexmodes=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"] //activeX versions to check for in IE | |
if (window.ActiveXObject) { //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken) | |
for (var i=0; i < activexmodes.length; i++) { | |
try { | |
return new ActiveXObject(activexmodes[i]); | |
} catch(e) { | |
//suppress error | |
} | |
} | |
} else if (window.XMLHttpRequest) { // if Mozilla, Safari etc | |
return new XMLHttpRequest(); | |
} else { | |
return false; | |
} | |
}; | |
function Countdowner (id, timestamp) { | |
this.target_date = timestamp || null; // new Date("Dec 25, 2021").getTime(); | |
this.id = id || "countdown_clock"; | |
} | |
Countdowner.prototype.display = function (queue) { | |
var dom_target = document.getElementById(this.id); | |
if (queue === null || queue.length === 0) { | |
dom_target.innerHTML = "Nothing in Queue"; | |
return null; | |
} | |
this.target_date = queue[0]; | |
var days, hours, minutes, seconds; | |
// find the amount of "seconds" between now and target | |
var current_date = new Date().getTime(); | |
var seconds_left = (this.target_date - current_date) / 1000; | |
// do some time calculations | |
days = parseInt(seconds_left / 86400); | |
seconds_left = seconds_left % 86400; | |
hours = parseInt(seconds_left / 3600); | |
seconds_left = seconds_left % 3600; | |
minutes = parseInt(seconds_left / 60); | |
seconds = parseInt(seconds_left % 60); | |
// format countdown string + set tag value | |
dom_target.innerHTML = days + "d, " + hours + "h, " | |
+ minutes + "m, " + seconds + "s"; | |
} | |
// TWO OBJECT to manage in Javascript | |
var queue = [new Date("Jan 1, 2015").getTime(), | |
new Date("Oct 1, 2014").getTime(), | |
new Date("Dec 13, 2014").getTime()]; | |
var cd = new Countdowner("countdown_clock"); | |
// Timers | |
setInterval(function () { | |
cd.display(queue); | |
}, 1000); | |
setInterval(function () { | |
Util.initAjax("someurl/somepath/some.json", function(payload) { | |
queue = []; | |
for (var i=0; i < payload.length; i++) { | |
var obj = payload[i]; | |
queue.push(obj.timestamp); // { name: "Bob", timestamp: 23456789, desc: "tweet 2" } | |
} | |
}); | |
}, 60000); // every minute | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment