您如何根据用户机器本地时间将 webflow 的主要 css 交换到其他 Github 托管 css？

Question

我正在尝试使用以下脚本根据用户本地时间将 css 应用到网站：

<script>
function getStylesheet() {
      var currentTime = new Date().getHours();
      if (0 <= currentTime&&currentTime < 5) {
       document.write("<link rel='stylesheet' href='https://rawcdn.githack.com/Jacopospina/humansplusmachines/6647fd1cb01b9b756e11d50f88efd72a6e800694/night.css' type='text/css'>");
      }
      if (5 <= currentTime&&currentTime < 16) {
       document.write("<link rel='stylesheet' href='portfolio-c16909.webflow.a39b8eeda.css' type='text/css'>");
      }
      if (16 <= currentTime&&currentTime < 22) {
       document.write("<link rel='stylesheet' href='https://rawcdn.githack.com/Jacopospina/humansplusmachines/6647fd1cb01b9b756e11d50f88efd72a6e800694/afternoon.css' type='text/css'>");
      }
      if (22 <= currentTime&&currentTime <= 24) {
       document.write("<link rel='stylesheet' href='https://rawcdn.githack.com/Jacopospina/humansplusmachines/6647fd1cb01b9b756e11d50f88efd72a6e800694/night.css' type='text/css'>");
      }
}

getStylesheet();
</script>

<noscript><link href="portfolio-c16909.webflow.a39b8eeda.css" rel="stylesheet"></noscript>

基本上，我想做的是根据用户本地机器时间应用 CSS 主题（例如白天、下午和夜晚类型的主题）。

这是我的原始 css 取自我的回购 @ GitHub（我知道 afternoon.css 与 webflow 的主要 css 完全相同，但这很好，因为我稍后再修改。我的主要观点是先让脚本成功运行）。

提前非常感谢您的想法 - 非常感谢！

Answer 1

我会按照下面的方法来做。如果您在脚本上方使用默认样式，则不需要 <noscript>。我不确定你的时间逻辑，不想花太多时间。

我还添加了一个间隔调用，以便当有人在页面上时样式会发生变化，并且小时恰好结束。它仅每小时运行一次，因此可能会模糊约 59 分钟。

<link id="myDynamicStyles" href="portfolio-c16909.webflow.a39b8eeda.css" rel="stylesheet">
<script>
    function changeStyleSheets() {
        const myDynamicStyleTag = document.getElementById('myDynamicStyles');
        const currentTime = new Date().getHours();

        if( currentTime < 5 ) {
            myDynamicStyleTag.href = 'https://rawcdn.githack.com/Jacopospina/humansplusmachines/6647fd1cb01b9b756e11d50f88efd72a6e800694/night.css';
        } else if( currentTime < 16 ) {
            myDynamicStyleTag.href = 'portfolio-c16909.webflow.a39b8eeda.css';
        } else if( currentTime < 22 ) {
            myDynamicStyleTag.href = 'https://rawcdn.githack.com/Jacopospina/humansplusmachines/6647fd1cb01b9b756e11d50f88efd72a6e800694/afternoon.css';
        } else if( currentTime <= 24 ) {
            myDynamicStyleTag.href = 'https://rawcdn.githack.com/Jacopospina/humansplusmachines/6647fd1cb01b9b756e11d50f88efd72a6e800694/night.css';
        }
    }

    changeStyleSheets();
    setInterval(changeStyleSheets, 1000*60*60); // call this every hour
</script>

<h1>My headline</h1>

您如何根据用户机器本地时间将 webflow 的主要 css 交换到其他 Github 托管 css？

How do you swap webflow's main css to other Github hosted css based on user's machine local time?

jquery

css

webflow