根据3个位置的当前时间更改3个背景图像

Question

我在一个页面上有3个图像，每个图像都需要更改以反映该位置的时间(白天或夜晚(。

我已经明白了，如果它是晚上7点和amp;每个时区的上午7点，图像变为夜晚，但我想要它，所以如果在英国晚上7点以后在英国，则是夜晚，但纽约＆amp;la图像仍然是一天，就像在那个位置...

这是我当前的代码：

    $(document).ready(function(){
     setInterval(function() {
        var hour = new Date().getHours();
        if (hour > 7 && hour <= 19) {
            // morning
            $('.contact').addClass('day');
        } else {
            // night
            $('.contact').addClass('night');
        }
        }, 1000);
    });

这可能只是使用jQuery？

html

<section>
        <article class="col-1-3 contact one">
            <h2>London</h2>
            <div class="col-1-2 address one">
                <address>
                3rd Floor<br/>
                9 Chapel Place<br/>
                London, EC2A 3DQ<br/>
                <a href="tel:[phone]">[phone]</a><br/>
                <a class="dir" href="" target="_blank">Get directions ></a>
                </address>
            </div>
        </article>
        <article class="col-1-3 contact three">
            <h2>New York</h2>
            <div class="col-1-2 address three">
                <address>
                46F, 10<br/>
                East 29th St<br/>
                New York, 10016<br/>
                <a href="tel:[phone]">tel:[phone]</a><br/>
                <a class="dir" href="" target="_blank">Get directions ></a>
                </address>
            </div>
        </article>
        <article class="col-1-3 contact two">
            <h2>Los Angeles</h2>
                <div class="col-1-2 address two">
                <address>
                4624 Cahuenga Blvd<br/>
                Unit 302<br/>
                Los Angeles, CA 91602<br/>
                <a href="tel:[phone]">tel:[phone]</a><br/>
                <a class="dir" href="" target="_blank">Get directions ></a>
                </address>
                </div>
        </article>
        <article class="col-1-1 copy" id="post-<?php echo $page->ID; ?>">
                <?php the_content(); ?>
        </article>
    </section>

Answer 1

要实现此目标，您可以获取当前的UTC时间，然后从该中心日期添加或减去每个位置的时区偏移。然后，您可以使用data属性在.contact元素上循环，以指定每个位置的偏移，并根据该元素更新元素的类。尝试以下操作：

$(document).ready(function() {
  function setClasses() {
    var now = new Date();
    
    $('.contact').each(function() {
      var $el = $(this);
      var local = new Date(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), now.getUTCHours() + $el.data('utcoffset'), now.getUTCMinutes());
      var hour = local.getHours();
      var isMorning = hour > 7 && hour <= 19;
      $el.toggleClass('day', isMorning);
      $el.toggleClass('night', !isMorning);
    });
  }
  setInterval(setClasses, 1000);
  setClasses();
});

.day {
  background-color: #add8e6;
  color: #fdfdb7;
}
.night {
  background-color: #00008b;
  color: #eee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <article class="col-1-3 contact one" data-utcoffset="0">
    <h2>London</h2>
    <div class="col-1-2 address one">
      <address>
        3rd Floor<br/>
        9 Chapel Place<br/>
        London, EC2A 3DQ<br/>
        <a href="tel:[phone]">[phone]</a><br/>
        <a class="dir" href="" target="_blank">Get directions ></a>
      </address>
    </div>
  </article>
  <article class="col-1-3 contact three" data-utcoffset="-5">
    <h2>New York</h2>
    <div class="col-1-2 address three">
      <address>
        46F, 10<br/>
        East 29th St<br/>
        New York, 10016<br/>
        <a href="tel:[phone]">tel:[phone]</a><br/>
        <a class="dir" href="" target="_blank">Get directions ></a>
      </address>
    </div>
  </article>
  <article class="col-1-3 contact two" data-utcoffset="-8">
    <h2>Los Angeles</h2>
    <div class="col-1-2 address two">
      <address>
        4624 Cahuenga Blvd<br/>
        Unit 302<br/>
        Los Angeles, CA 91602<br/>
        <a href="tel:[phone]">tel:[phone]</a><br/>
        <a class="dir" href="" target="_blank">Get directions ></a>
      </address>
    </div>
  </article>
</section>

还要注意，鉴于课程不太可能更改，您页面中的每一秒都有些浪费。我建议最多最多将间隔更改为一次。

Answer 2

最简单的方法是在.contact元素中向您的HTML添加偏移数据值。例如，伦敦是GMT 0，给它data-offset="0"纽约是GMT-5给它data-offset="-5"。

这样使用您的jQuery：

$(document).ready(function(){
 setInterval(function() {
    $('.contact').each(function() {
        var date = new Data();
        var hour = (date.getHours() + date.getTimezoneOffset() * 60000) + parseInt($(this).data('offset'));
        if (hour > 7 && hour <= 19) {
            // morning
            $('this').addClass('day');
        } else {
            // night
            $('this').addClass('night');
        }
        }
    }, 1000);
});

我没有运行该代码，最好在使用之前仔细检查。