腳本 - 顯示不同內容的不同時間

-1

我正在嘗試開發一個顯示內容的網站，並在用戶瀏覽時顯示內容。
例如，當早晨時間，用戶將看到早晨場景內容，
，而在晚上時，用戶將看到晚安內容。
這可以做什麼？
我不知道這應該是什麼電話。
任何人都熟悉這個請大家幫忙
謝謝您對HTML部分腳本 - 顯示不同內容的不同時間

<script> 
$(document).ready(function() 
{ 
var hour = new Date().getHours(); 
if (hour < 10){ 
    // morning 
    $('body').addClass("morning"); 
} else if (hour > 16){ 
    // evening 
    $('body').addClass("evening"); 
} 

// Check once every hour 
setInterval(function(){ 
    // Remove all existing classes 
    $('body').removeClass("morning evening"); 

    var hour = new Date().getHours(); 

    // Add back specific classes based on the hour 
    if (hour < 10){ 
     // morning 
     $('body').addClass("morning"); 
    } else if (hour > 16){ 
     // evening 
     $('body').addClass("evening"); 
    }   
    }, 60000); 

}); 
</script> 

<style type="text/css"> 
body.morning #background{ 
    background: url(images/morning.jpg); 
    colour: blue; 
} 
body.evening #background{ 
    background: url(images/evening.jpg); 
    colour: red; 
} 
</style>

同時：

<body> 
<div id="background"></div> 
</body>

來源

2014-12-05 demoncoder

請顯示您的嘗試。這是檢查當前時間的小時的簡單問題。 – 2014-12-05 11:03:01

@TrueBlueAussie不是這個劇本的專家。但是你的回答讓我有一天我今晚會嘗試一下，看看我能否做到這一點。 – demoncoder 2014-12-05 11:38:55

如果沒有，請回來一個你的代碼和HTML的例子（避免這裏的反對票的好方法）:) – 2014-12-05 11:40:43

根據一天中的時間，您可以加載不同的CSS，例如，如果你有day.css和night.css，你可以做這樣的事情：

<script> 
<!-- 
function getCSS() { 
     var currentTime = new Date().getHours(); 

     if (7 <= currentTime && currentTime < 20) { 
     document.write("<link rel='stylesheet' href='day.css' type='text/css'>"); 
     } 
     else 
     { 
     document.write("<link rel='stylesheet' href='night.css' type='text/css'>"); 
     } 
} 

getCSS(); 
--> 
</script>

來源

2014-12-05 11:04:35 bosnjak

爲CSS解決方案添加一個類到'body'就足夠了？ – 2014-12-05 11:05:41

它會，但也許它不只是身體需要改變，而是整個CSS集？ – bosnjak 2014-12-05 11:06:56

因此*級聯*風格例如'body.morning .someclass'。這就是所謂的CSS的原因:) – 2014-12-05 11:07:45

您可以簡單地檢查當前日期/時間的小時並測試該範圍的值。根據這些檢查，向正文中添加一個類，然後在級聯樣式表（CSS）中執行其他操作。

var hour = new Date().getHours(); 
if (hour < 10){ 
    // morning 
    $('body').addClass("morning"); 
} else if (hour > 16){ 
    // evening 
    $('body').addClass("evening"); 
}

等

造型例如

body.morning #background{ 
    background: url(images/morning.jpg) 
    colour: blue; 
} 
body.evening #background{ 
    background: url(images/evening.jpg) 
    colour: red; 
}

如果您運行定期這個檢查（慢setInterval的），你可以得到實時的動態變化morning => lunch => evening之間的天移動等這看起來很酷:)

eg像

// Check once every hour 
setInterval(function(){ 
    // Remove all existing classes 
    $('body').removeClass("morning evening"); 

    var hour = new Date().getHours(); 

    // Add back specific classes based on the hour 
    if (hour < 10){ 
     // morning 
     $('body').addClass("morning"); 
    } else if (hour > 16){ 
     // evening 
     $('body').addClass("evening"); 
    }   
}, 60000);

來源

2014-12-05 11:06:24

這將是最好和最優雅的做法。 – Alin 2014-12-05 11:07:37

腳本 - 顯示不同內容的不同時間

回答

相關問題