-5

これが私がやろうとしていることです-私は次のコードを持っています：

<div id="on">
<p>We are: <span class="onair"><a href="#">ON AIR</a></span></p>
</div> 
<div id="off">
<p>We are: <span class="offair"><a href="#">OFF AIR</a></span></p> 
</div>

そして、私がやりたいのは、火曜日の午後3時から午後4時（サーバー時間）に「オン」のdivを「表示」し、同時に「オフ」のdivを非表示にしてから、1日おきにそれを切り替えることです。

？

4

3 に答える 3

1

PHPを使用する場合は、サーバー側でロジックステートメントを実行して、後でクライアント側で計算する代わりに、必要な情報を正確にレンダリングできます。

（時間がどこから来ているかを気にしない場合は、クライアント側のソリューションも機能します）

（1）スクリプトで使用できるJavaScriptをサーバーにレンダリングさせることができます

//if you want the server's time you can do this:
<?php $timestamp = time(); ?>

//render variables in javascript instead of html
<?php 
  echo <<<EOD
    <script>
     var timestamp = ${timestamp}
     //then later in your javascript process the timestamp logic to update the dom
    </script>
  EOD;
?>

（2）条件がtrueかfalseかに基づいて、サーバーにbodyタグのclassNameをレンダリングさせることもできます。（これは通常私の好みの方法です）

//onAirClass( min, max, timestamp ) returns className 
//this function returns onair or offair class if the timestamp is in range
function onAirClass( timeMin, timeMax, timestamp ){
  if( timestamp >= timeMin && timestamp <= timeMax ){
    return 'onair';
  }
  return 'offair'
}

//using onAirClass( min, max, timestamp ) 
<?php $bodyClass = $bodyClass . ' ' . onAirClass( $timestamp ); ?>
<?php echo "<body class='${bodyClass}'>"; ?>

次に、スタイルで、bodyタグからのクラス継承に基づいて非表示または表示する要素を含めることができます。

PHPの時間関数をチェックして新しい時間文字列を作成し、onAirClass（）関数の時間計算を行います

特定の時間範囲間の時間を確認する方法

更新しました

PHP構文エラーを修正しました

@maericsソリューションはOKです。何をしたいかにもよりますが、次のようなことは絶対にしないでください。

var timestamp = $('#server-timestamp').text();

最終的に、同じことを行う方法はたくさんありますが、他の方法よりも「正しい」方法もあります。

クライアント側とサーバー側で計算を行う理由があり、その逆もあります。初心者の開発者として、使用する方法が何であれ、次のことを確認してください。

  • シンプルです
  • 効率的です（不要または冗長なことは何もしません）
  • ベストプラクティスに沿ったもの
于 2013-02-12T18:10:15.567 に答える
0

サーバーがページを生成するときにタイムスタンプを提供し、クライアントがページをロードするときにタイムスタンプも生成するようにして、2つのシステム間の時間オフセットを計算できるようにします。

次に、現在のサーバー時刻をチェックして午後3時から午後4時の期間内であるかどうかを確認し、必要に応じてターゲット要素を表示/非表示にする関数を一定の間隔で呼び出すことができます。

サーバーから：

<div id="server-timestamp" style="display:none">2013-02-12T18:01:19Z</div>

クライアントの場合：

$(document).on('load', function() {
  var serverTime = new Date($('#server-timestamp').text())
    , clientTime = new Date()
    , offsetMilliseconds = (clientTime - serverTime);
  setInterval(function() {
    // If server time is 3pm-4pm then hide/show divs...
  }, 1000 /* every second */);
});
于 2013-02-12T18:06:00.740 に答える
0

実際、これは、タイムゾーンオフセットを使用することにより、サーバー側のコードなしでJavaScriptのみを使用して実現できます。

使用できる関数は次のとおりです。

var onAir = function (day, start, end, timezone) {
    var local, utc, show, days, onAir, startValues, endValues, startTime, endTime, startMinutes, endMinutes, showMinutes;

    // by default, we are not on air    
    onAir = false;

    // map day numbers to indexes
    days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Firday', 'Saturday'];

    // convert start/end times to date objects
    startValues = start.split(':');
    endValues = end.split(':');
    startTime = new Date();
    endTime = new Date();
    startTime.setHours(startValues[0], startValues[1]);
    endTime.setHours(endValues[0], endValues[1]);

    // add the hours minutes together to get total minutes
    startMinutes = (startTime.getHours() * 60) + startTime.getMinutes();
    endMinutes = (endTime.getHours() * 60) + endTime.getMinutes();

    // get the current local time
    local = new Date();

    // get the current time in the show's timezone
    utc = local.getTime() + (local.getTimezoneOffset() * 60000);
    show = new Date(utc + (3600000*timezone));

    // convert the show hours + minutes to just minutes
    showMinutes = (show.getHours() * 60) + show.getMinutes();

    // test to see if the show is going on right now
    if (days[show.getDay()] === day && (showMinutes >= startMinutes && showMinutes <= endMinutes)) {
        onAir = true;
    }

    return onAir;
}

// example: Air time is Tuesday between 1-2pm Central Time (-6)
var texasShowOnAir = onAir('Tuesday', '13:00', '14:00', '-6'));

// now check if we are on air
if (texasShowOnAir) {
    // do stuff here...
}

これで、この関数を次のように使用できます。

var check = onAir('DAY', 'STARTTIME', 'ENDTIME', 'YOURTIMEZONE');

これにより、が返されtrue/falseます。必ず24時間形式を使用してください。

多くの場合（特に共有ホスティングを使用している場合）、サーバーを自分とは異なるタイムゾーンに設定できるため、これはサーバーのタイムスタンプを使用するよりも優れているとさえ言えます。

これがデモフィドルです：http： //jsfiddle.net/stevenschobert/mv54B/

于 2013-02-12T19:21:02.757 に答える