-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 - 然后每隔一个日期/时间切换一次。

?

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) 你也可以让服务器根据条件是真还是假来在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 解决方案还可以，具体取决于您想做什么，只是永远不要做这样的事情：

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

最终，有很多方法可以做同样的事情，但有些事情比其他事情更“正确”。

有理由在客户端与服务器端进行一些计算，反之亦然。作为新手开发人员，只要确保您使用的任何方法：

  • 很简单
  • 高效（不做任何不必要或多余的事情）
  • 符合最佳实践
于 2013-02-12T18:10:15.567 回答
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 回答
0

让服务器在生成页面时提供时间戳，让客户端在加载页面时也生成时间戳，以便您可以计算两个系统之间的时间偏移。

然后，您可以在某个时间间隔调用一个函数，检查当前服务器时间以查看它是否在下午 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 回答