如何每小時更改一次身體背景圖像？

Question

在我的網頁設計課程中，我們被要求做一個為期一周的練習，其中我們找出如何采用新穎的方法來顯示時間和溫度。 本課程按創造力評分，我被允許並鼓勵使用插件。

就我的想法而言，我認為每小時更改我的網站背景以與相應的時間相匹配會很有趣。 我有多張鮮花盛開和關閉的圖像，我認為與一天中的某個時間相對應會很有趣。

我應該怎么做才能把自己已有的東西拿出來，使我每小時都能改變背景圖片？ 它應該與我現有的javascript插件時鍾相對應，還是完全獨立的實現？ 提前致謝！

我不希望圖像在設置的間隔后發生變化，我希望一天中的某些時間與背景圖像相對應。

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

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

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

這是約翰·達克特的javascript和jquery書中的代碼

var today= new Date();
var hourNow = today.getHours();
var greeting;
if (hourNow > 18) {
greeting= 'Good evening!';
else if (hourNow > 12) {
greeting = ' Good afternoon!';
else if (hourNow > 0) {
greeting = 'Good morni ng!';
else {
greeting = 'Welcome! ' ;
}
document .write( ' <h3>' +greeting + ' </ h3> ');

變量greeting的值基於if條件進行更改。 請參見Date和getHours（）方法

如何每小時更改一次身體背景圖像？

問題描述

3 個解決方案

解決方案1
2 2016-10-17 15:33:49

解決方案2
2 已采納 2016-10-17 15:39:11

解決方案3
1 2016-10-17 15:53:19

如何每小時更改一次身體背景圖像？

問題描述

3 個解決方案

解決方案1 2 2016-10-17 15:33:49

解決方案2 2 已采納 2016-10-17 15:39:11

解決方案3 1 2016-10-17 15:53:19

解決方案1
2 2016-10-17 15:33:49

解決方案2
2 已采納 2016-10-17 15:39:11

解決方案3
1 2016-10-17 15:53:19