脚本 - 显示不同内容的不同时间

-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

脚本 - 显示不同内容的不同时间

回答

相关问题