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

Question

我想安排一个<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>

score 1 · Accepted Answer

一个简单的方法是：

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 小提琴演示。

显示如何添加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 小提琴演示。

根据评论中提供的更多信息（由 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 小提琴演示。

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

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 小提琴演示。

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

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 小提琴演示。

score 0 · Accepted Answer

最后，我选择了...

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

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

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

score 0 · Accepted Answer

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

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

3 回答 3

Related

Reference