Question

对于我的网页设计课程，我们被要求进行为期一周的练习，我们会弄清楚如何采用创意方法来掌握时间和温度。这个课程根据创造力进行评分，我被允许并鼓励他使用插件。

对于我的想法，我认为每小时更改一次网站的背景以匹配相应的时间会很有趣。我有一个花朵开花和关闭的多个图像，我认为与一天中的时间相对应是有趣的。

我该怎么做才能拿走我已经拥有的东西并制作它以便我每小时都可以更改背景图像？它应该与我现有的javascript插件时钟相对应，还是完全独立实现？提前谢谢！

我不希望图像在设定的间隔后发生变化，我希望当天的某些时间与背景图像相对应。

＆＃13;

body {
  background-color: black;
  margin-left: 5%;
  margin-right: 5%;
}

#txt {
  color: white;
  float: left;
  font-family: OpenSans;
  font-size: 90px;
  margin: 20px;
}

#weather {
  color: white;
  float: right;
  font-family: OpenSans;
  font-size: 40px;
  margin: 20px;
}

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <title>Blooming Time And Temperature</title>
    <link href="css/format.css" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <script>
    function startTime() {
  document.getElementById('txt').innerHTML =
    moment().format("hh:mm A");
  var t = setTimeout(startTime, 1000);
}
    </script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.1.0/jquery.simpleWeather.min.js"></script>
    <script>
      $(document).ready(function() {
        $.simpleWeather({
          location: 'Brooklyn, NY',
          woeid: '',
          unit: 'f',
          success: function(weather) {
            html = '<p>'+weather.temp+'&deg;'+weather.units.temp+'</p>';
            html += '<div id="city">'+weather.city+', '+weather.region+'</div>';

            $("#weather").html(html);
          },
          error: function(error) {
            $("#weather").html('<p>'+error+'</p>');
          }
        });
      });
    </script>
  </head>
  <body onload="startTime()">
    <div id="txt"></div>
    <div id="weather"></div>
  </body>
</html>

＆＃13;

Answer 1

为了简单起见，你可以setInterval()。以下是它的工作原理：http://www.w3schools.com/jsref/met_win_setinterval.asp

我要做的是检查当前时间，然后得到现在和下一个小时之间的差异（也就是说，如果是10:30，我想知道10:30到11之间有多少时间），以毫秒为单位执行setTimeout()，然后调用一个函数，该函数开始每小时调用的setInterval()函数。

希望这有帮助！

Answer 2

你需要按小时计算一天中的小时数。根据小时，您可以使用jQuery更改背景：

$(document).ready(function() {

    setInterval(function(){
        var hour = new Date().getHours();
        if(hour > 7 && hour <= 12)
        {
           // It's morning
           $('body').css('background', 'url(url-to-image-one) no-repeat');
        }
        else if(hour > 12 && hour < 18)
        {
           // It's noon
           $('body').css('background', 'url(url-to-image-two) no-repeat');
        }
        else
        {
            // It's night
            $('body').css('background', 'url(url-to-image-three) no-repeat');
        }
    }, 1000 * 60 *60);

});

Answer 3

这是John duckett的javascript和jquery书中的代码

Fragment frg = null;
                frg = getSupportFragmentManager().findFragmentById(R.id.pager);
                final FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
                ft.detach(frg);
                ft.attach(frg);
                ft.commit();

变量greeting的值是基于if条件的变化。请参阅Date和getHours() method

如何每小时更改一次身体背景图像？

3 个答案: