代码片段 → JavaScript → 根据一天中的时间切换样式表

根据一天中的时间切换样式表

Avatar of Chris Coyier
Chris Coyier 于 
<script>
<!--
function getStylesheet() {
      var currentTime = new Date().getHours();
      if (0 <= currentTime&&currentTime < 5) {
       document.write("<link rel='stylesheet' href='night.css' type='text/css'>");
      }
      if (5 <= currentTime&&currentTime < 11) {
       document.write("<link rel='stylesheet' href='morning.css' type='text/css'>");
      }
      if (11 <= currentTime&&currentTime < 16) {
       document.write("<link rel='stylesheet' href='day.css' type='text/css'>");
      }
      if (16 <= currentTime&&currentTime < 22) {
       document.write("<link rel='stylesheet' href='evening.css' type='text/css'>");
      }
      if (22 <= currentTime&&currentTime <= 24) {
       document.write("<link rel='stylesheet' href='night.css' type='text/css'>");
      }
}

getStylesheet();
-->
</script>

<noscript><link href="main.css" rel="stylesheet"></noscript>

相应地命名你的 CSS 文件：night.css、day.css 等……一个很酷的额外好处是，由于 JavaScript 从本地机器获取时间而不是从服务器获取，因此用户将根据*他们*自己的时间而不是服务器的时间（可能位于完全不同的时区）获得基于时间样式表。

如果浏览器中禁用了 JavaScript，则将默认使用 main.css 样式表。

嘘！ 创建一个 DigitalOcean 帐户并获得 $200 的免费积分 用于基于云的托管和服务。

评论

  1. Euan
    评论永久链接#

    取决于，而不是待定。

    但非常有用

    回复
  2. Nicolas Bouliane
    评论永久链接#

    如果我错了请纠正我，但是使用 PHP 会更合适吗，因为浏览器不必从服务器加载代码？此外，它可以向用户隐藏代码，从而保留其神奇之处！

    回复
    • josh
      评论永久链接#

      仅当你想使用服务器时间时，使用 php 才有用。PHP 无法获取用户的时间，因为浏览器不会以这种方式发送信息。如果你想根据用户的时间来确定你的实例，则必须使用客户端脚本而不是服务器端脚本。

      （如果你仔细想想，服务器端语言日期对象将返回服务器的日期/时间，而客户端语言日期对象将返回客户端的日期/时间）

    • Aaron Mason
      评论永久链接#

      取决于你如何操作。如果你通过生成样式表的 PHP 脚本加载样式表，则可以使用 new Date().getTime() 发送一天中的时间，从中计算出小时数（因为它将是来自客户端的本地时间），并使用它来决定返回哪个样式表

      document.write('<link rel="stylesheet" type="text/css" href="stylesheet.php?time=' + (new Date().getTime()) + '">');

      一个更好的方法，也是一种对服务器端性能影响较小的方法，是在一个文件中发送所有样式表（因为客户端会为你缓存它），并在 body 标签上使用 CSS 类来确定使用哪个样式表 - 然后使用 JS 选择所需的类。

  3. Attila Hajzer
    评论永久链接#

    你也可以根据分辨率来做这个吗？例如，根据分辨率使用此样式表，而不是此样式表？

    回复
  4. Billy Brown
    评论永久链接#

    如果有人在更改期间访问网站，整个 css 以及新的图片（在新 css 中）是否必须加载？因为这可能看起来不太好。

    回复
    • Patrick
      评论永久链接#

      是的，它将不得不再次加载，但这并非实时完成，因此主题将在页面刷新后更改。用户不会看到 CSS 更改的过程，他们将在页面加载/重新加载时看到新的样式。此致。

  5. Damien
    评论永久链接#

    确实非常有用。我通常会为用户提供一个选项，让他们在登录时选择他们想要的 css，但这可能非常不错。谢谢！

    回复
  6. Poole Web Design
    评论永久链接#

    嗨，很棒的小脚本。但是，我还想使用以下方法向 body 添加一个类

    
 if (0 <= currentTime&&currentTime  < 5) {
		  $('body').addClass('night');
       document.write("<link rel='stylesheet' href='night.css' type='text/css' >");
      }

    它正在添加样式表，但没有在 body 上添加类 - 有什么想法吗？

    回复
  7. Easy Webs
    评论永久链接#

    **顶！** 上述有任何想法吗？我想对一些人来说会非常有帮助。

    谢谢

    回复
  8. Travis
    评论永久链接#

    @Easy Webs，我猜你的脚本在 body 标签加载之前就执行了，所以 jQuery 找不到它。你需要将该代码包装在 document ready 中，或者在页面底部运行它。

    $(document).ready(function() { 

})
    回复
  9. Easy Webs
    评论永久链接#

    嗨，Travis，

    是的，这完美地解决了问题 - 问题在于它找不到 body 标签。我一定从其他地方获取了一些错误的建议，说要立即执行此操作，我可以不用 document .ready…但它需要这个才能在页面上找到元素！

    非常感谢，现在我可以根据一天中的时间交换样式表并执行一些特定于类的操作……太棒了。

    Paul

    回复
  10. e11world
    评论永久链接#

    这非常棒。我一定会在我的下一个项目中使用它

    回复
  11. Matt Havoc
    评论永久链接#

    这很棒而且非常有用，但我有一个问题：我该如何让它在半小时内更改时间？我想让时间在下午 5:30 更改，但使用这个我只能做到下午 5 点或 6 点。

    回复
  12. wolf
    评论永久链接#

    此外，如果每个样式表也可以手动触发并在会话结束后过期的 cookie 中存储选择，那就太好了。是否有意义将每个 document.write 放入其自己的函数中，然后可以通过网站上的按钮以及 if 子句中触发该函数。那会是什么样子？有人有想法吗？我只是一个设计师，而不是一个程序员，无法做到这一点……

    回复
  13. wolf
    评论永久链接#

    找到了这个手动切换器（http://www.cssnewbie.com/simple-jquery-stylesheet-switcher/）……这两种方法可以结合起来，产生一个非常有用的脚本，该脚本根据一天中的时间自动选择样式表 - 但允许通过在网站上选择样式表（例如通过下拉菜单）手动覆盖自动选择，并在浏览器会话期间将该选择存储在 cookie 中？！那将是太棒了！

    回复
  14. wolf
    评论永久链接#

    @ Matt Havoc …
    如何计算一天中的分钟数？据说一天有 1440 分钟。

    谁能检查一下这段代码 - 这行得通吗？

    
      var currentDate = new Date();
      var currentMinute = (currentDate.getHours()  * 60) + currentDate.getMinutes();

    
      if (0 <= currentMinute&&currentMinute < 30) {
      document.write("<link rel='stylesheet' href='0_30.css' type='text/css'>");
      }
      if (30 <= currentMinute&&currentMinute < 60) {
      document.write("<link rel='stylesheet' href='30_60.css' type='text/css'>");
      }
      // you get the idea ... so we are wrapping it up for the rest of the time
      if (60 <= currentTime&&currentTime <= 1400) {
       document.write("<link rel='stylesheet' href='60_1440.css' type='text/css'>");
      }
    回复
  15. wolf
    评论永久链接#

    糟糕……打错了

    if (60 <= currentTime&&currentTime <= 1400) {

    应该是

    if (60 <= currentMinute&&currentMinute <= 1400) {

    当然还有……；)

    回复
  16. Matt Havoc
    评论永久链接#

    @wolf：非常感谢，这正是我需要的。你太棒了！

    回复
  17. Wolf
    评论永久链接#

    @Matt Havoc - 你太客气了。很高兴它能工作……

    回复
  18. Dima
    评论永久链接#

    爱你，伙计:) 谢谢！

    回复
  19. chand
    评论永久链接#

    如果用户已登录，我希望 .css 不应像之前那样。因为我想向访客隐藏一些管理选项，并且只想向管理员显示，因为我同时编写了这些选项的代码。因此，如果您有人对此有任何想法，可以使用 php 或 JS 或仅使用 css。然后请解决它。

    回复
  20. Eric
    评论永久链接#

    有谁知道一种基于日期而不是时间来执行此操作的方法吗？
    例如，在 12 月 20 日至 25 日期间，您可以显示“christmas.css”，然后在接下来的一个星期切换到“newyears.css”等等……这将是添加季节性元素的好方法，而无需一直关注这些事情。

    回复
  21. Peter
    评论永久链接#

    在我看来，代码框是空的？还有其他人注意到这一点吗？

    回复
  22. Casa Malina
    评论永久链接#

    哇！网络上最好的时间敏感 css 脚本！！

    回复
  23. Andrew
    评论永久链接#

    只是好奇，如果我们*确实*希望显示的时间对时区敏感，那么该如何编写代码。例如，如果商店的营业时间从上午 9 点到下午 5 点（太平洋标准时间），那么在网站上可以指示商店是否营业。

    非常感谢任何人的天才帮助！

    Viva CSS-Tricks！

    回复
  24. Zach

    评论永久链接#

    您好，我想知道如何在 WordPress 主题中使用此脚本？我目前启用了自己制作的一个非常明亮和充满活力的主题，我希望我的读者在晚上阅读时也能使用一个暗色主题。感谢您的帮助！

    回复
  25. Chard
    评论永久链接#

    您好，这里有一个很棒的代码片段。但我有一个问题，如果我使用上面的代码片段在工作日加载 CSS，但我想在周末（星期六和星期日）加载不同的 CSS，该怎么做呢？

    回复
  26. Ryô
    评论永久链接#

    谢谢，我一直在寻找这样的东西，非常有用的代码。

    回复
  27. Geo
    评论永久链接#

    这很棒。但是如果访客在他的电脑上使用 12 小时制会发生什么？

    回复
  28. Jonas
    评论永久链接#

    是否可以根据 URL 中的文件名加载不同的 css 文件？如果是，怎么做？我已经找了几个星期了，但没有找到解决方案。遗憾的是，我是一个 JS 新手。:(

    Ex

    http://www.xxx.com/ABC.asp?blah-blah
    加载 ABC.css

    http://www.xxx.com/XYZ.asp?blah-blah
    加载 XYZ.css

    回复
  29. Emilio
    评论永久链接#

    我需要帮助，想让样式表每天都更改，我该怎么做？感谢您的帮助。

    回复
  30. Cr3At0r
    评论永久链接#

    如何在 2 张图像（日出；日落）之间根据特定时间切换？
    它可以切换，但从 0:00 到 12:00。
    如何使其从早上 7:00 到晚上 19:00（第一张图像），然后从
    晚上 19:00 到早上 7:00（第二张图像）再次切换？

    var current= new Date()
    var day_night=current.getHours()
    if (day_night<=12)
    document.write("”)

    else
    document.write(“”)

    回复
  31. MARCO A GARCIA VILLEGAS
    评论永久链接#

    有史以来最好的解决方案！！！谢谢兄弟

    回复
  32. Aaron Mason
    评论永久链接#

    在当今时代，我认为更好的解决方案是将所有样式都放在一个文件中，然后在body上使用一个类来选择一天中时间的样式集。这也意味着如果禁用了 JavaScript，则无需任何技巧即可简单地拥有一个默认样式表。

    styles.css

    body.night {
}
body.night h1 {
}
body.day {
}
body.day h1 {
}
/* and so on and so on */

    page.html

    <html>
<head>
    <link rel="stylesheet" href="styles.css" type="text/css" />
    <script type="text/javascript">

function chooseBodyClass()
{
    document.body.classList.remove('night', 'day', 'evening', 'morning')
    let hour=new Date().getHours();
    switch (hour)
    {
        case 0: case 1: case 2: case 3: case 4: case 22: case 23: case 24:
            document.body.classList.add('night');
            break;
        case 5: case 6: case 7: case 8: case 9: case 10:
            document.body.classList.add('morning');
            break;
        case 11: case 12: case 13: case 14: case 15:
            document.body.classList.add('day');
            break;
        case 16: case 17: case 18: case 19: case 20: case 21:
            document.body.classList.add('evening');
            break;
    }
}

    </script>
<body class="day">
<!-- page thingies go here, obviously - change the class above to choose the "default" time of day -->
</body>
</html>
    回复

发表评论

Your email address will not be published. Required fields are marked *

© 2024 . All rights reserved.