Question

I have a project in mind where I would like to change the stylesheet based on time of day. I had initially done this with php, but it grabbed the server’s time. Which was a less than ideal experience considering time zone differences.

I figure javascript may be the best bet to grab the users local time but I am not sure how I would write it. This is similar to what I had in mind, but I am thinking more every 3-6 hours change styles. Thanks in advance for your help!

Answer 1

You could do something like this:

$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, '" />';

It’s dynamic, based on the number of stylesheets you specify. Currently the number of stylesheets needs to be a factor of 24 (1, 2, 3, 4, 6, 8, 12, 24). You could get rid of this requirement by modifying the code to use minutes and seconds instead of just hours, but that’s too much math for me this morning. 🙂

Edit: Here’s the same script in 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'));