创建一个不断变化的谷歌涂鸦风格的标题

一个简单的方法是：

var today = new Date(),
    d = today.getDate(),
    m = today.getMonth() + 1,
    y = today.getFullYear(),
    date = d + '/' + m + '/' + y,
    specialDate = '4/9/2012';
if (date == specialDate) {
    console.log('yay!'); /* or whatever */
}​

JS Fiddle演示。

显示如何将img添加到body:

var today = new Date(),
    d = today.getDate(),
    m = today.getMonth() + 1,
    y = today.getFullYear(),
    date = d + '/' + m + '/' + y,
    specialDate = '4/9/2012',
    specialImage = document.createElement('img');
specialImage.src = 'http://www.eventspianist.co.uk/wp-content/uploads/2011/08/special_occasion.jpg';
document.getElementsByTagName('body')[0].appendChild(specialImage);
if (date == specialDate) {
    document.getElementsByTagName('body')[0].appendChild(specialImage);
}​

JS Fiddle演示。

编辑根据评论中提供的进一步信息（由OP提供），以下内容仅更改已存在图像的src属性：

var today = new Date(),
    d = today.getDate(),
    m = today.getMonth() + 1,
    y = today.getFullYear(),
    date = d + '/' + m + '/' + y,
    imgToReplace = document.getElementById('header-inner'),
    specialDate = '4/9/2012',
    specialImageSrc = 'http://www.eventspianist.co.uk/wp-content/uploads/2011/08/special_occasion.jpg';
console.log(imgToReplace);
if (date == specialDate) {
    imgToReplace.src = 'http://www.eventspianist.co.uk/wp-content/uploads/2011/08/special_occasion.jpg';
}​

JS Fiddle演示。

此版本明确地用新创建的图像替换旧图像：

var today = new Date(),
    d = today.getDate(),
    m = today.getMonth() + 1,
    y = today.getFullYear(),
    date = d + '/' + m + '/' + y,
    imgToReplace = document.getElementById('header-inner'),
    specialDate = '4/9/2012',
    specialImage = document.createElement('img');
specialImage.src = 'http://www.eventspianist.co.uk/wp-content/uploads/2011/08/special_occasion.jpg';
if (date == specialDate) {
    imgToReplace.parentNode.replaceChild(specialImage, imgToReplace);
}​

JS Fiddle演示。

编辑，希望达到自提出问题以来添加的要求：

function createArea(parent, coords, href, shape) {
    if (!parent || !coords || !href) {
        return false;
    }
    else {
        var newArea = document.createElement('area'),
            shape = shape || 'rect';
        newArea.coords = coords;
        newArea.href = href;
        newArea.shape = shape;
        parent.appendChild(newArea);
        return newArea;
    }
}
var today = new Date(),
    d = today.getDate(),
    m = today.getMonth() + 1,
    y = today.getFullYear(),
    date = d + '/' + m + '/' + y,
    specialDate = '5/9/2012',
    headerInner = document.getElementsByClassName('header-inner')[0],
    childDiv = document.createElement('div'),
    newImg = document.createElement('img'),
    newMap = document.createElement('map');
if (date == specialDate) {
    // setting up attributes of the newImg:
    newImg.id = 'Image-Maps_9201209030919307';
    newImg.src = 'http://2.bp.blogspot.com/-7EbtRf3eD6k/UBfBJKNkG8I/AAAAAAAABww/FDr_YNqs6zM/s1600/freddieforadayheader.png';
    newImg.setAttribute('usemap', '#Image-Maps_9201209030919307');
    newImg.style.height = '258px';
    newImg.style.width = '968px';
    newImg.style.borderWidth = '0';
    childDiv.appendChild(newImg);
    // Setting up the imagemap:
    newMap.id = 'Image-Maps_9201209030919307';
    newMap.name = newMap.id;
    childDiv.insertBefore(newMap, newImg.nextSibling);
    // setting up the areas:
    var area1 = createArea(newMap, '51,213,90,253', 'http://www.facebook.com/FreddieForADay'),
        area2 = createArea(newMap, '98,212,137,252', 'http://www.youtube.com/user/FreddieForADay'),
        area3 = createArea(newMap, '238,206,724,246', 'http://www.freddieforaday.com/'),
        area4 = createArea(newMap, '777,151,963,253', 'http://www.freddieforaday.com/'),
        area5 = createArea(newMap, '166,79,797,151', 'http://www.freedomrequireswings.com/');
    console.log(area4);
    // emptying the headerInner div element:
    while (headerInner.firstChild) {
        headerInner.removeChild(headerInner.firstChild);
    }
    // adding the new content (all contained within the childDiv node):
    headerInner.appendChild(childDiv);
}​

JS Fiddle演示。

您可以使用var now = new Date()获取当前日期和时间，然后与想要显示<div>. 的日期进行比较

最后，我选择了。。。

<script type='text/javascript'>
var today = new Date(),
d = today.getDate(),
m = today.getMonth() + 1,
y = today.getFullYear(),
date = d + '/' + m + '/' + y,
specialDate = '5/9/2012';
if (date == specialDate) {
document.getElementById("doodle").style.display = "block";
document.getElementById("defaultheader").style.display = "none";
} 
else {
document.getElementById("doodle").style.display = "none";
document.getElementById("defaultheader").style.display = "block";
} 
</script>

然后我把我的自定义涂鸦代码放入

<div id='doodle'>

和中我默认的每日标题

<div id='defaultheader'>

它适用于所有浏览器，并且易于自定义。

非常感谢大卫托马斯的帮助！