0

<div>ユーザーがその場所で深夜に表示されるようにスケジュールを設定したいと思います。したがって、ニューヨークのユーザーがサイトにいて、9月4日の場合は表示されませんが、オーストラリアのユーザーは9月5日の深夜0時を過ぎた場所に表示されます。オーストラリアの人たちにとっても、23時59分に消えなければならないでしょう。

HTML / javascriptを介してこれを行う方法はありますか？これは私のサイトのヘッダー画像と同様のことになるので、GoogleがどのようにしてDoodleを深夜に表示するのか疑問に思っています。私は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>
4

3 に答える 3

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フィドルデモ。

にを追加する方法を示し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フィドルデモ。

于 2012-09-04T20:41:49.010 に答える
0

を使用var now = new Date()して現在の日付と時刻を取得し、表示する日付と比較することができます。<div>.

于 2012-09-04T20:40:29.250 に答える
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'>

すべてのブラウザで動作し、簡単にカスタマイズできます。

デビッド・トーマスの助けに感謝します！

于 2012-09-05T01:24:06.360 に答える