開いて閉じた画像のスワップが正しい時刻に変更されない

これの基本的な前提は、設定されたスケジュール（この場合は午前9時から午後5時）に基づいて画像を変更するコードセクションを持つことです。符号。開いて閉じた画像のスワップが正しい時刻に変更されない

私がこれまで持っているコードは次のとおりです。

<script type='text/javascript'> 
$(window).load(function(){ 
// Translate your hours to UTC, example here is using Central Standard Time (-0500 UTC) 
// Opening hour in UTC is 16, Closing hour is 0 the next day 
var d = new Date(), 
    open = new Date(), 
    closed = new Date(); 
// Statically set UTC date for open 
open.setUTCHours(16); 
open.setUTCMinutes(0); 
open.setUTCSeconds(0); 
open.setUTCMilliseconds(0); 
// Statically Set UTC date for closing 
closed.setUTCDate(d.getUTCDate()+1); // UTC time rotates back to 0 so we add a day 
closed.setUTCHours(0); // UTC hours is 0 
closed.setUTCMinutes(0); 
closed.setUTCSeconds(0); 
closed.setUTCMilliseconds(0); 
// Debugging 
console.log("user's date:" + d); 
console.log("store open time in user's timezone:" + open); 
console.log("store close time in user's timezone:" + closed); 
console.log(d > open); // user's time is greater than opening time 
console.log(d < closed); // is user's time less than closing time (you don't have to go home...) 

// Test for store open? 
if (d > open && d < closed) { 
    setOpenStatus(true); 
} 
else { 
    setOpenStatus(false); 
} 

function setOpenStatus(isOpen) { 
    $('#open').toggle(isOpen); 
    $('#closed').toggle(!isOpen); 
} 
});//]]> 

</script> 


</head> 

<body> 
    <div id="status"> 
    <div id="open"><span title="OPEN"></span></div> 
    <div id="closed"><span title="CLOSED"></span></div> 
</div> 

</body> 

</html>

どのように今までそれはそれらの回で変更されていない何らかの理由で、私はそれはそれは、ブラウザの時間をリフレッシュしていないとは何かを持っているが、私かもしれないと思いますわからない。

ありがとうございました！

出典

2016-05-02 Kronos

。 setIntervalを使用します。また$（window）.loadを$（document）.readyに置き換えることもできます。 – yezzz

HTMLには、開閉記号を追加する必要があります。スパンタグの内側に+と - の記号を使用しました。

毎時値をテストする場合は、javacript関数setIntervalを使用する必要があります。この処理を停止するには、関数clearIntervalを使用します。あなただけwindow.load上のものをやっているので、だ

// the intervalId 
 
var nIntervId = null; 
 

 
// for debug purposes 
 
var lastIsOpen = true; 
 

 
function setOpenStatus(isOpen) { 
 
    $('#open').toggle(isOpen); 
 
    $('#closed').toggle(!isOpen); 
 
} 
 

 
// the function to stop the setInterval function 
 
function stopCheckIfClosed() { 
 
    if (nIntervId != null) { 
 
    clearTimeout(nIntervId); 
 
    nIntervId = null; 
 
    } 
 
} 
 

 
// your code: 
 
// I added an optional parameter so that if you call this function 
 
// without the parameter the value false is used, otherwise 
 
// the value passed to the function is used 
 
function checkIfClosed(isInDebugMode) { 
 
    var inDebugMode = isInDebugMode || false; 
 

 
    if (inDebugMode) { 
 
    if (lastIsOpen) { 
 
     lastIsOpen = false; 
 
     setOpenStatus(true); 
 
    } else { 
 
     lastIsOpen = true; 
 
     setOpenStatus(false); 
 
    } 
 
    nIntervId = window.setTimeout(checkIfClosed, 3000, true); 
 
    return; 
 
    } 
 

 
    var d = new Date(); 
 
    // Test for store open? 
 
    if (d.getHours() >= 9 && d.getHours() <= 17) { 
 
    setOpenStatus(true); 
 
    // wait for the 17 
 
    nIntervId = window.setTimeout(checkIfClosed, (17 - 9)*60*60*1000, true); 
 
    } else { 
 
    setOpenStatus(false); 
 
    // wait for the 9 
 
    nIntervId = window.setTimeout(checkIfClosed, (17 - 9)*60*60*1000, true); 
 
    } 
 
} 
 

 
$(function() { 
 
    // on document ready call your function: with no arguments means no debug 
 
    checkIfClosed(true); 
 

 
    // compute if wait for the next 9 or 17 
 
    var d = new Date(); 
 
    var tomorroAtNine = new Date(d.getFullYear(), d.getMonth(), d.getDate() + 1, 9); 
 
    var tomorroAtFive = new Date(d.getFullYear(), d.getMonth(), d.getDate() + 1, 17); 
 
    var diffToNine = (tomorroAtNine.getTime() - d.getTime()) * 1000; 
 
    var diffTofive = (tomorroAtFive.getTime() - d.getTime()) * 1000; 
 

 
    if (diffToNine < diffTofive) { 
 
    //nIntervId = window.setTimeout(checkIfClosed, diffToNine, true); 
 
    } else { 
 
    //nIntervId = window.setTimeout(checkIfClosed, diffTofive, true); 
 
    } 
 
    // for test pursposes I reduced the interval to 3 seconds 
 
    nIntervId = window.setTimeout(checkIfClosed, 1000, true); 
 
});

#status div { 
 
    font-family:helvetica,arial,sans-serif; 
 
    font-size:20px; 
 
    font-weight:bold; 
 
} 
 
#status span { 
 
    display:inline-block; 
 
    text-indent:-12000px; 
 
} 
 
#open,#closed{ 
 
    display:none; 
 
} 
 
#open span { 
 
    background-image: url('http://i.imgur.com/KmGlJgN.png'); 
 
    width:640px; 
 
    height:335px; 
 
} 
 
#closed span { 
 
    background-image: url('http://i.imgur.com/YWLrDlm.png'); 
 
    width:1100px; 
 
    height:850px; 
 
}

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> 
 

 

 
<div id="status"> 
 
    <div id="open"><span title="OPEN">+</span></div> 
 
    <div id="closed"><span title="CLOSED">-</span></div> 
 
</div>

出典

2016-05-02 17:26:16 gaetanoM

詳細な説明をありがとうございます！あなたのコードを実行すると、UTCをテストするためにそれを変更しても、 "閉じた"パラメータに切り替えるようなことはありません。はここJsfiddleです： http://jsfiddle.net/AcFhg/346/ 注*画像は今のためだけのプレースホルダであること。 – Kronos

@gsemafもう一度見ていただきありがとうございます。大変感謝しています。ただし、オープンとクローズドサインは1秒の設定間隔で変更され、オープン/クローズド時間（午前9時〜午後5時）にのみUTCを参照する必要があります。 – Kronos

@Kronos Snippetが更新されました。タイマースロットでループするのではなく、ミリ秒単位の時間間隔を次のステップ（9または17）に計算しました。あなたが9時に来ると、次回のタイムアウトは17〜9時間後などになります。チェックの数を減らすためです。これがあなたに役立つことを願っています – gaetanoM

開いて閉じた画像のスワップが正しい時刻に変更されない

答えて

関連する問題