<div id=”RecentPosts”></div>
<Script>
// Configurable params
var recentPostNumber = 8;
var rssUrl = “http://blogs.msdn.com/bali_msft/rss.xml”;
var title = “My Recent Posts”;
var newPostAgeInHour = 72;
// Cacluate age of one post. It is all about getting time span in Javascript
// return formate: x min; x hour y min, x day y min, x days, x yeas (ago)
// Refer to: http://www.w3schools.com/jsref/jsref_obj_date.asp
function calculateAge(postDate)
{
var ret = “fresh!”;
CurrentDate = new Date();
TimeSpan = new Date(CurrentDate – postDate);
var mySpanArray = new Array();
mySpanArray[0] = TimeSpan.getUTCFullYear()-1970;
mySpanArray[1] = TimeSpan.getUTCMonth();
mySpanArray[2] = TimeSpan.getUTCDate()-1;
mySpanArray[3] = TimeSpan.getUTCHours();
mySpanArray[4] = TimeSpan.getUTCMinutes();
var TimeSpanTagArray_1 = new Array(“years”, “months”, “days”, “hours”, “minutes”);
var TimeSpanTagArray_2 = new Array(“year”, “month”, “day”, “hour”, “minute”);
// Starting from non-zero element and pick two significant values
for(i = 0; i < mySpanArray.length; i++) {
if(mySpanArray[i] != 0) {
var correctTag = (mySpanArray[i] == 1)?(TimeSpanTagArray_2[i]):(TimeSpanTagArray_1[i]);
ret = mySpanArray[i] + ” “ + correctTag;
if(i+1 < mySpanArray.length && mySpanArray[i+1] != 0) {
correctTag = (mySpanArray[i+1] == 1)?(TimeSpanTagArray_2[i+1]):(TimeSpanTagArray_1[i+1]);
ret = ret + “, “ + mySpanArray[i+1] + ” “ + correctTag;
}
break;
}
}
return ret;
}
// Display the recent posts
// Refer to:
// http://www.w3schools.com/DOM/dom_node.asp
// http://www.w3schools.com/DOM/dom_methods.asp
function displayPosts (xmldoc)
{
var newTag = “<SPAN style=\”COLOR: red\”>(New!)</SPAN>”;
var posts = xmldoc.getElementsByTagName(“item”);
var displayText = “<h3>” + title + “</h3><UL>”;
if (posts.length < recentPostNumber) {
recentPostNumber = posts.length;
}
for(var i = 0; i < recentPostNumber; i++)
{
PostTitle = posts[i].firstChild.firstChild.nodeValue;
PostLink = posts[i].firstChild.nextSibling.firstChild.nodeValue;
PostDateStr = posts[i].firstChild.nextSibling.nextSibling.firstChild.nodeValue;
PostDate = new Date(PostDateStr);
CurrentDate = new Date();
// Calculate age
var _PostAge = calculateAge(PostDate);
var PostAge = “<SPAN style=\”font-size: 80%; color: black\”> (“ +_PostAge + ” ago)</SPAN>”;
// Show a new tag for posts happening last days defined by ‘newPostAgeInHour’
var myNewTag = “”;
if((CurrentDate.getTime() – PostDate.getTime())/1000/60 < newPostAgeInHour * 60) {
myNewTag = newTag;
}
// Get background color
var BKColor = (i%2 == 0)?(“#B8CCE4″):(“#DBE5F1″);
displayText = displayText + “<LI style=\”background-color:” + BKColor + “\”><A href=\”" + PostLink + “\”>” + myNewTag + PostTitle + PostAge + “</A></LI>”
}
displayText = displayText + “</UL>”;
var target = document.getElementById(“RecentPosts”);
target.innerHTML=displayText;
}
// Call back
function complete(){
if (req.readyState == 4) {
if (req.status == 200) {
displayPosts (req.responseXML);
}
}
}
// Initial async call
function getPosts()
{
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
}else if (window.ActiveXObject) {
req = new ActiveXObject(“Microsoft.XMLHTTP”);
}
if(req){
req.open(“GET”, rssUrl, true);
req.onreadystatechange = complete;
req.send(null);
}
}
// Entry point
getPosts();
</Script>
