時間帯別にhtml要素内のコンテンツのライブアップデート

時刻に基づいてhtml要素内のコンテンツを更新しようとしていますが、私はこれに似た何かをやっています：Updating div content according to timeページをリフレッシュせずに。時間帯別にhtml要素内のコンテンツのライブアップデート

コード：

function schoolPeriod() { 
    var date = new Date(); 
    var h = date.getHours(); 
    var m = date.getMinutes(); 

    // prepend minutes with 0 if < 10 
    if (m < 10) { 
     m = "0" + m; 
    } 

    h = h.toString(); 
    m = m.toString(); 

    var t = h + m; 

    var periods = [ 
     "school assembly", 
     "first period", 
     "second period", 
     ]; 

     var currentPeriod = document.querySelector('.current-period'); 

     if (t >= 600) { 
      currentPeriod.innerHTML = "new school day"; 
     } 
     else if (t >= 900) { 
      currentPeriod.innerHTML = periods[0]; 
     } 
     else if (t >= 940) { 
      currentPeriod.innerHTML = periods[1]; 
     } 
     else if (t >= 1020) { 
      currentPeriod.innerHTML = periods[2]; 
     } 

    setTimeout(schoolPeriod, 1000); 
} 
schoolPeriod();

codepen：私は間違ってhttp://codepen.io/carpenumidium/pen/grRYoN?editors=1011

をしていますか？助けを感謝します！

出典

2016-07-03 carpenumidium

@nnnnnnそれは完全に働いた！ありがとう！あなたがそれを1つとして投稿すれば、私はあなたの答えを受け入れるでしょう！ :) – carpenumidium

if/else if/else if/else ifテストの順序を逆にする必要があります。

なぜですか？ tは1020です。現在ifの条件がt >= 600の場合、trueになるので、ブロックはelse ifではなく実行されます。（ifがスキップされたとしても、1020は900よりも大きく940より大きい...）一連の>=条件をテストする場合は、可能性の高いテストを開始する必要があります。（まだ午前6時でない場合の最終的なelseステートメントの追加について考えてみることもできます）

また、t = h + mは、1桁（時間が、例えば、午前10時03分の場合、h + mは103になります）。代わりに100によって、文字列に複数の時間を時間と分の変換：100を掛けることはあなたの分の数を与えないことを

var t = h * 100 + m;

注意、それはちょうどあなたが600との比較を行うことのためにそれが容易になります午前6時のために、など

（そこでは、関数が短く、より拡張性にするために何ができる他のものがありますが、私が紹介してきた問題は、現在の形で働いて、それを止めるものです。）

出典

2016-07-03 04:03:43 nnnnnn

> 10:03 am then h + mは103になります if（m <10）{m = "0" + m; }。しかし、あなたはそれを行うより良い方法があるように見えます。 – carpenumidium

はい。私の答えのその部分を更新して、60時間ではなく100時間を乗算するようにしたことに注意してください。時間の計算をもっとやる必要がある場合は最高ですが、数字1020を10:20にする必要があります。 – nnnnnn

ええ、私はそれを使用します、私は1000ミリメートルにタイマーを設定すると、パフォーマンスのヒットはbtwですか？ – carpenumidium

これを試してみてください：

function schoolPeriod() { 
     var date = new Date(); 
     var h = date.getHours(); 
     var m = date.getMinutes(); 

     var t = (h * 60) + m; 

     var selectedIndex = 0; 

     if (t >= 620) { 
      selectedIndex = 3; 
     } 
     else if (t >= 580) { 
      selectedIndex = 2; 
     } 
     else if (t >= 540) { 
      selectedIndex = 1; 
     } 

     var periods = [ 
      "new school day", 
      "school assembly", 
      "first period", 
      "second period", 
     ]; 

     document.querySelector('.current-period').innerHTML = periods[selectedIndex]; 

     setTimeout(schoolPeriod, 1000); 
    } 

    schoolPeriod();

出典

2016-07-03 04:00:28

あなたその後、else文が間違っている場合。それは常に(t >= 600)

をチェックし、あなたにこれを置き換えています：このような何かを試してみてください

function schoolPeriod() { 
var date = new Date(); 
var h = date.getHours(); 
var m = date.getMinutes(); 

h = h.toString(); 
m = m.toString(); 

var t = h + m; 

var periods = [ 
    "school assembly", 
    "first period", 
    "second period", 
    ]; 

    var currentPeriod = document.querySelector('.current-period'); 

    if (t >= 600 && t< 900) { 
     currentPeriod.innerHTML = "new school day"; 
    } 
    else if (t >= 900 && t<940) { 
     currentPeriod.innerHTML = periods[0]; 
    } 
    else if (t >= 940 & t<1020) { 
     currentPeriod.innerHTML = periods[1]; 
    } 
    else if (t >= 1020) { 
     currentPeriod.innerHTML = periods[2]; 
    } 

setTimeout(schoolPeriod, 1000); 
} 

// Call the function 
schoolPeriod();

希望これがお手伝いします:)

出典

2016-07-03 04:02:40

、期間を分単位で設定されている - =午前6時360

var periods = [ 
 
['period 1',360,365], 
 
['period 2',365,400], 
 
['period 3',400,460], 
 
['period 4',460,520] 
 
]; 
 
function getPeriod(){ 
 
var period = 'School is closed'; 
 
var minutes = new Date().getHours()*60 + new Date().getMinutes(); 
 
for(var i=0;i<periods.length;i++){ 
 
    if(minutes>=periods[i][1] && minutes<periods[i][2]){ 
 
    period = periods[i][0]; 
 
    break; 
 
    } 
 
} 
 
document.getElementById('period').innerHTML = period; 
 
setTimeout(getPeriod,1000); 
 
}

<html> 
 
<head> 
 
</head> 
 
<body onload="getPeriod();"> 
 
<div id="period"></div> 
 
</body> 
 
</html>

出典

2016-07-03 04:02:52 ElDoRado1239

時間帯別にhtml要素内のコンテンツのライブアップデート

答えて

関連する問題