根據小時和分鐘更改CSS

我正在編寫一個以24/7顯示的頁面，並且每個頁面都沒有任何交互。我希望CSS根據小時和分鐘進行更改（即8:30而不是8次）。我發現一個解決方案完全基於小時，但無法獲得分鐘數，所以我也想要更進一步。一旦它擊中觸發一個CSS的變化，這也刷新頁面更改CSS時根據小時和分鐘更改CSS

var d=new Date(); 
var twi_am_start = 6; 
var twi_am_end = 14; 
var twi_pm_start = 14; 
var twi_pm_end = 22; 

if (d.getHours() >= twi_am_start && d.getHours() < twi_am_end) 
    document.write('<link rel="stylesheet" href="../css/first.css" type="text/css">'); 
else if (d.getHours() >= twi_pm_start && d.getHours() < twi_pm_end) 
    document.write('<link rel="stylesheet" href="../css/second.css" type="text/css">'); 
else 
    document.write('<link rel="stylesheet" href="../css/third.css" type="text/css">');

來源

2016-04-26 Nrodgers1987

根據代碼的ammount的，我同意斯文範·德·Scheur，只需添加它在同一個樣式表上，並在主體上使用一個類... 除非你的每個CSS都會太大而無法加載到一個文件上 – miguelmpn

如果你真的要根據時間改變css文件，試試這個：

var now = new Date(), 
    hours = now.getHours(), 
    minutes = now.getMinutes() + hours * 60, 
    link = document.createElement('link'), 
    href; 

var TIME_INTERVALS = { // in minutes 
    AM_START: 6 * 60, 
    AM_END_PM_START: 14 * 60, 
    PM_END: 22 * 60 
} 

var CSS_FILES = { 
    AM_START: 'first.css', 
    AM_END_PM_START: 'second.css', 
    PM_END: 'third.css' 
} 

link.rel = 'stylesheet'; 
link.type = 'text/css'; 

if (minutes > TIME_INTERVALS.AM_START) { 

    if (minutes > TIME_INTERVALS.AM_END_PM_START) { 

     if (minutes > TIME_INTERVALS.PM_END) { 
      // > PM_START hours now 
      href = CSS_FILES.PM_END; 
     } else { 
      // > AM_END_PM_START && < PM_END time 
      href = CSS_FILES.AM_END_PM_START; 
     } 

    } else { 
     // AM_START - AM_END 
     href = CSS_FILES.AM_START; 
    } 
} else { 
    // 00.00 - AM_START 
    href = CSS_FILES.PM_END; 
} 

link.href = '../css/' + href; 

document.getElementsByTagName('head')[0].appendChild(link);

的jsfiddle例子 - https://jsfiddle.net/mvx42L92/

來源

2016-04-26 11:28:53

它看起來可以工作，但是我如何改變它： 00： 00-06：40 =第三個 06：40-14：40 =第一個 14：40-22：40 =秒 22：40-24：00 =第三個 – Nrodgers1987

您需要更改時間斷點，在'TIME_INTERVALS'對象中更新fiddle https://jsfiddle.net/mvx42L92/1/。只需要加上40分鐘到幾小時（看小提琴的評論） –

我想出了那部分，我可以使用十進制小時..感謝您的幫助！ – Nrodgers1987

正是基於你的時間類添加到頁面的主體。

<body class="morning">

然後再應用css：

.morning { background: orange; } 
.afternoon { background: lightblue; } 
.evening { background: darkblue; }

（採摘顏色一些隨機名稱）

來源

2016-04-26 11:17:13

要獲得分鐘而不是幾個小時，你可以用這個方法：

var d = new Date(); 
var n = d.getMinutes();

現在你可以用你的腳本適應它。

來源

2016-04-26 11:23:42

根據小時和分鐘更改CSS

回答

相關問題