Question

我在页面上有3张图片，每张图片都需要更改以反映该位置的时间（白天或夜晚）。

如果是在晚上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时间，然后从该中心日期添加或减去每个位置的时区偏移量。然后，您可以使用.contact属性循环遍历data元素，以指定每个位置的偏移量，并根据该位置更新元素的类。试试这个：

＆＃13;

$(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();
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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);
});

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

根据3个地点的当前时间更改3张背景图像

2 个答案: