Изменение таблицы стилей на основе метки времени пользователя на локальном компьютере. Решение Javascript?

Question

Я имею в виду проект, в котором я хотел бы изменить таблицу стилей в зависимости от времени суток.Первоначально я сделал это с php, но он захватил время сервера.Это был далеко не идеальный опыт, учитывая разницу во времени.

Я полагаю, что javascript может быть лучшим выбором для захвата времени пользователей по местному времени, но я не уверен, как бы я это написал. Это похоже на то, что я имел в виду , но я думаю о том, что каждые 3-6 часов меняю стили.Заранее спасибо за помощь!

Answer 1

Вы можете сделать что-то вроде этого:

$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'));

Answer 2

Прежде всего вам два варианта делать это только с помощью 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);

Answer 3

Из руководства по адресу:

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

Рекомендую вам начать чтение с раздела, озаглавленного "ALTERNATE"

, используя свойство alternate вместе сфункция: