根據本地計算機上的用戶時間戳更改樣式表。 Javascript解決方案？

我有一個項目，我想根據一天中的時間更改樣式表。我最初是用php做的，但是它抓住了服務器的時間。考慮到時區差異，這不是理想的體驗。根據本地計算機上的用戶時間戳更改樣式表。 Javascript解決方案？

我認爲javascript可能是最好的辦法來抓住用戶當地時間，但我不確定我會如何寫它。 This is similar to what I had in mind，但我每3-6小時更換一次風格。在此先感謝您的幫助！

2012-01-27 CarterMan

你可以這樣做像這樣：

$stylesheets = array(
    'foo.css', 
    'bar.css', 
    'baz.css', 
    // ... 
    'qux.css' 
); 

$numStylesheets = count($stylesheets); 

if (24 % $numStylesheets !== 0) { 
    echo 'Number of stylesheets needs to be a factor of 24.'; 
    exit; 
} 

$hour = (int)date('H', $_SERVER['REQUEST_TIME']); 
$changeEveryXHours = 24/$numStylesheets; 
$offset = floor($hour/$changeEveryXHours); 
$stylesheet = $stylesheets[$offset]; 

echo '<link rel="stylesheet" href="', $stylesheet, '" />';

它是動態的，基於您指定的樣式表的數量。目前，樣式表的數量需要是24的因子（1,2,3,4,6,8,12,24）。您可以通過修改代碼來使用分鐘和秒而不是僅僅幾個小時來擺脫這個要求，但是今天早上對我來說這太多了。 :-)

編輯：下面是JS同一個腳本：

var stylesheets = [ 
    'foo.css', 
    'bar.css', 
    'baz.css', 
    // ... 
    'qux.css' 
]; 

if (24 % stylesheets.length != 0) { 
    alert('Number of stylesheets needs to be a factor of 24.'); 
    return false; 
} 

var now = new Date(); 
var hour = now.getHours(); 
var changeEveryXHours = 24/stylesheets.length; 
var offset = Math.floor(hour/changeEveryXHours); 
var stylesheet = stylesheets[offset]; 

// If you're using jQuery, I think it's something like this: 
$('<link>') 
    .prop({ 
     rel: 'stylesheet', 
     href: stylesheet 
    }) 
    .appendTo($('head'));

來源

2012-01-27 14:20:14 FtDRbwLXw6

在這種情況下，24的因子實際上會起作用。但是，我不確定時間戳是否會抓住服務器或本地服務器，我將不得不嘗試一下。非常感謝您的幫助！ – CarterMan 2012-01-27 14:39:03

啊..對不起，我想我應該仔細閱讀你的問題。是的，要使用客戶的時間，你必須使用JS。您可以使用AJAX將客戶端的時間發送到服務器，並讓服務器使用正確的樣式表進行響應（然後使用'document.write（）'或其他）。或者你可以在JS中複製這個腳本的邏輯，這很簡單 - 你只需要使用'var now = new Date（）; var hour = dt.getHours（）;'而不是。 – FtDRbwLXw6 2012-01-27 14:46:11

我用JS版本編輯了我的答案。 – FtDRbwLXw6 2012-01-27 14:53:12

從導在：

http://www.alistapart.com/articles/alternate/

我reccommend你開始從部分閱讀標題一起使用alternate屬性與功能「備用」

：

來源

2012-01-27 14:05:24

嗨@Ernest Marcinko感謝您的回答，但您更願意（至少）從可以回答此特定問題的鏈接頁面粘貼摘錄。謝謝僅供參考此答案被標記爲低質量，請閱讀回答問題的指導 – pythonian29033 2017-11-03 09:02:13

儘管此鏈接可能回答此問題，但最好在此處包含答案的重要部分並提供供參考的鏈接。如果鏈接頁面更改，則僅鏈接答案可能會失效。 – 2017-11-03 09:10:10

首先你兩個選擇使用jQuery（JavaScript）的做到這一點只有或jQuery的& PHP

如果你用PHP完成它，然後你可以使用ajax請求發送當前時間到PHP函數並返回需要的樣式表然後把它放在頭部

function do_it() 
{ 
now = new Date(); 
current_time = now.getHours()+':'+now.getMinutes()+':'+now.getSeconds(); 
$.ajax({ 
    type: "POST", 
    url: "your_php_script.php", 
    data:{ current_user_time: current_time} 
}).done(function(data) { 
//maybe you will need some logic here :) 
//and get the old file name 
    $('link[href^=old_css_file.css]').attr('href',data); 
}); 
} 

setInterval(function(){ 
do_it(); 
//cal it every 3 hours 
}, 10800000);

來源

2012-01-27 14:20:20 Sedz

這相當精確，這可能是我想要做的理想選擇。我將不得不稍後嘗試，並將其與我的PHP腳本結合使用。非常感謝您的幫助！ – CarterMan 2012-01-27 14:40:12

根據本地計算機上的用戶時間戳更改樣式表。 Javascript解決方案？

回答

相關問題