创建不断变化的Google涂鸦样式标题

时间：2012-09-04 20:33:25

标签： javascript datetime time scheduled-tasks

我想安排<div>为用户在午夜时在他们的位置展示。因此，如果纽约的用户在网站上并且9月4日他们将不会看到它，但澳大利亚的用户将在9月5日午夜过后。对于那些在澳大利亚的人来说，它也必须在23:59消失。

有没有办法通过HTML / javascript做到这一点？我想知道谷歌如何让他们的涂鸦在午夜出现，因为这与我的网站标题图像类似。我在Blogger平台上。

感谢。

编辑：添加的代码仅适用于FF，而不适用于其他浏览器

<div class='header-inner'>
<script>
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.write(<div style='text-align:center; width:968px; margin-left:auto; margin-right:auto; position:relative; top:-0px; z-index:3;'>
<img alt='' border='0' height='258' id='Image-Maps_9201209030919307' src='http://2.bp.blogspot.com/-7EbtRf3eD6k/UBfBJKNkG8I/AAAAAAAABww/FDr_YNqs6zM/s1600/freddieforadayheader.png' usemap='#Image-Maps_9201209030919307' width='968'/>
<map id='_Image-Maps_9201209030919307' name='Image-Maps_9201209030919307'>
<area alt='' coords='5,212,44,252' href='http://twitter.com/#!/freddieforaday' shape='rect' title=''/>
<area alt='' coords='51,213,90,253' href='http://www.facebook.com/FreddieForADay' shape='rect' title=''/>
<area alt='' coords='98,212,137,252' href='http://www.youtube.com/user/FreddieForADay' shape='rect' title=''/>
<area alt='' coords='238,206,724,246' href='http://www.freddieforaday.com/' shape='rect' title=''/>
<area alt='' coords='777,151,963,253' href='http://www.freddieforaday.com/' shape='rect' title=''/>
<area alt='' coords='166,79,797,151' href='http://www.freedomrequireswings.com/' shape='rect' title=''/>
</map>
</div>); 
document.write('<style>#header {display:none;}</style>'); 
}
</script>
<div class='header section' id='header'><div class='widget Header' id='Header1'>
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<img src='http://2.bp.blogspot.com/-wlqM17mmGtI/UCwqdvlhrzI/AAAAAAAAB64/VUcGl3kFcxE/s1600/title.png' style='margin-bottom:-20px; padding-top:20px'/>
</h1>
</div>
<div class='descriptionwrapper'>
<p class='description'>
<span>
</span>
</p>
</div>
</div>
</div></div>

我有什么：

<div class='header-inner'>
<div class='header section' id='header'><div class='widget Header' id='Header1'>
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<img src='http://2.bp.blogspot.com/-wlqM17mmGtI/UCwqdvlhrzI/AAAAAAAAB64/VUcGl3kFcxE/s1600/title.png' style='margin-bottom:-20px; padding-top:20px'/>
</h1>
</div>
<div class='descriptionwrapper'>
<p class='description'>
<span>
</span>
</p>
</div>
</div>
</div></div>

我最终希望得到什么：

    <div class='header-inner'>
<div style='text-align:center; width:968px; margin-left:auto; margin-right:auto;'>
<img alt='' border='0' height='258' id='Image-Maps_9201209030919307' src='http://2.bp.blogspot.com/-7EbtRf3eD6k/UBfBJKNkG8I/AAAAAAAABww/FDr_YNqs6zM/s1600/freddieforadayheader.png' usemap='#Image-Maps_9201209030919307' width='968'/>
<map id='_Image-Maps_9201209030919307' name='Image-Maps_9201209030919307'>
<area alt='' coords='5,212,44,252' href='http://twitter.com/#!/freddieforaday' shape='rect' title=''/>
<area alt='' coords='51,213,90,253' href='http://www.facebook.com/FreddieForADay' shape='rect' title=''/>
<area alt='' coords='98,212,137,252' href='http://www.youtube.com/user/FreddieForADay' shape='rect' title=''/>
<area alt='' coords='238,206,724,246' href='http://www.freddieforaday.com/' shape='rect' title=''/>
<area alt='' coords='777,151,963,253' href='http://www.freddieforaday.com/' shape='rect' title=''/>
<area alt='' coords='166,79,797,151' href='http://www.freedomrequireswings.com/' shape='rect' title=''/>
</map>
</div>
    </div>

3 个答案:

答案 0 :(得分：1)

一个简单的方法是：

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 demo

展示如何将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 demo

根据评论中提供的更多信息（由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 demo

此版本使用新创建的图像显式替换旧图像：

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 demo

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

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 demo

答案 1 :(得分：0)

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

的日期进行比较

答案 2 :(得分：0)

最后，我选择了...... 

<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'>

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

非常感谢David Thomas的所有帮助！

相关问题
最新问题