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

Question

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

我已经明白了，所以如果每个时区的晚上 7 点和早上 7 点之间，图像会变为夜间，但我希望如果在英国晚上 7 点之后，英国图像是夜间，但纽约和洛杉矶图像仍然是白天，因为它会在那个位置...

这是我当前的代码:

    $(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:+442078707414">+44 207 870 7414</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:+16317769772">tel:+1 631 776 9772</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:+12094109977">tel:+1 209 410 9977</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:+442078707414">+44 207 870 7414</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:+16317769772">tel:+1 631 776 9772</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:+12094109977">tel:+1 209 410 9977</a><br/>
        <a class="dir" href="" target="_blank">Get directions ></a>
      </address>
    </div>
  </article>
</section>

另请注意，考虑到类不太可能更改，在页面中每秒运行一次有点浪费。我建议将间隔更改为最多一分钟一次。