Question

我想为不同的国家显示不同的时区。问题是我无法像我想要的那样工作。

我有一个名为data-hour的数据属性。这可以是正号/负号。在函数update中，我得到了var AddHours = $('.hours').data("hours");的值。

如果我只想显示一次，则可以使用date.setHours(date.getHours() + 3);之类的东西，它将显示当前时间+3小时。我已将其修改为date.setHours(date.getHours() AddHours);，但未显示任何内容。显然我做错了。但是呢？

谢谢。

代码：

<!--Country One-->
<p id="C_one" class="TextCenter NoMargin ClockUnit">
    <span class="hours" data-hours="+4"></span>:<span class="minutes"></span>:<span class="seconds"></span>
</p>

<!--Country Two-->
<p id="C_two" class="TextCenter NoMargin ClockUnit">
    <span class="hours" data-hours="-1"></span>:<span class="minutes"></span>:<span class="seconds"></span>
</p>

<!--Country Three-->
<p id="C_three" class="TextCenter NoMargin ClockUnit">
    <span class="hours" data-hours="+2"></span>:<span class="minutes"></span>:<span class="seconds"></span>
</p>

<script>
var $hOut = $('.hours'),
    $mOut = $('.minutes'),
    $sOut = $('.seconds');

function update(){
    var AddHours = $('.hours').data("hours");
    var date = new Date();

    date.setHours(date.getHours() AddHours);

    var hours = date.getHours();
    hours = (hours < 10 ? "0" : "") + hours;

    var minutes = date.getMinutes();
    minutes = (minutes < 10 ? "0" : "") + minutes;

    var seconds = date.getSeconds();
    seconds = (seconds < 10 ? "0" : "") + seconds;

    $hOut.text(hours);
    $mOut.text(minutes);
    $sOut.text(seconds);
} 

update();
window.setInterval(update, 1000);
</script>

Answer 1

如下更新代码。

将$('.TextCenter')放在上面，然后在其中找到.hours，.minutes和.seconds。使用$(this).find。

将您的date更新为date = new Date(date.getTime() + (AddHours * 60 * 60 * 1000));。

function update() {

  $('.TextCenter').each(function() {
    var $hOut = $(this).find('.hours'),
      $mOut = $(this).find('.minutes'),
      $sOut = $(this).find('.seconds');

    var AddHours = $hOut.data("hours");
    var date = new Date();

    date = new Date(date.getTime() + (AddHours * 60 * 60 * 1000));
    //date.setHours(date.getHours());

    var hours = date.getHours();
    hours = (hours < 10 ? "0" : "") + hours;

    var minutes = date.getMinutes();
    minutes = (minutes < 10 ? "0" : "") + minutes;

    var seconds = date.getSeconds();
    seconds = (seconds < 10 ? "0" : "") + seconds;

    $hOut.text(hours);
    $mOut.text(minutes);
    $sOut.text(seconds);
  });
}

update();
window.setInterval(update, 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!--Country One-->
<p id="C_one" class="TextCenter NoMargin ClockUnit">
  <span class="hours" data-hours="+4"></span>:<span class="minutes"></span>:<span class="seconds"></span>
</p>

<!--Country Two-->
<p id="C_two" class="TextCenter NoMargin ClockUnit">
  <span class="hours" data-hours="-1"></span>:<span class="minutes"></span>:<span class="seconds"></span>
</p>

<!--Country Three-->
<p id="C_three" class="TextCenter NoMargin ClockUnit">
  <span class="hours" data-hours="+2"></span>:<span class="minutes"></span>:<span class="seconds"></span>
</p>

Answer 2

转换以下行：

date.setHours(date.getHours() AddHours);

到

date.setHours(date.getHours(), AddHours);

[添加逗号。]

如果您没有附加任何jQuery库，则将其添加到脚本中。

该解决方案将起作用。像下面的一样：

var $hOut = $('.hours'),
  $mOut = $('.minutes'),
  $sOut = $('.seconds');

function update() {
  var AddHours = $('.hours').data("hours");
  var date = new Date();

  date.setHours(date.getHours(), AddHours);

  var hours = date.getHours();
  hours = (hours < 10 ? "0" : "") + hours;

  var minutes = date.getMinutes();
  minutes = (minutes < 10 ? "0" : "") + minutes;

  var seconds = date.getSeconds();
  seconds = (seconds < 10 ? "0" : "") + seconds;

  $hOut.text(hours);
  $mOut.text(minutes);
  $sOut.text(seconds);
}

update();
window.setInterval(update, 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--Country One-->
<p id="C_one" class="TextCenter NoMargin ClockUnit">
  <span class="hours" data-hours="+4"></span>:<span class="minutes"></span>:<span class="seconds"></span>
</p>

<!--Country Two-->
<p id="C_two" class="TextCenter NoMargin ClockUnit">
  <span class="hours" data-hours="-1"></span>:<span class="minutes"></span>:<span class="seconds"></span>
</p>

<!--Country Three-->
<p id="C_three" class="TextCenter NoMargin ClockUnit">
  <span class="hours" data-hours="+2"></span>:<span class="minutes"></span>:<span class="seconds"></span>
</p>

仅使用一项功能显示多个时区

2 个答案: