// This line depends on jQuery, and tells the browser to kick off this stuff once // everything's fully loaded $(document).ready(function () { // These two lines make set a Date variable with the current date and time var currentDate = new Date(); var currentHour = currentDate.getHours(); // Here we're creating a new to insert in the var newCSS = document.createElement('link'); newCSS.type = 'text/css'; newCSS.rel = 'stylesheet'; // This is where you can determine when to use which stylesheet. // If the current hour is before 9am or 8pm (or later), use "night.css" if (currentHour >= 22 || currentHour<5) newCSS.href = 'night.css'; else if (currentHour >= 20) newCSS.href = 'sunset.css'; else if (currentHour >= 16) newCSS.href = 'evening.css'; else if (currentHour >= 12) newCSS.href = 'day.css'; else if (currentHour >= 7) newCSS.href = 'morning.css'; else if (currentHour >= 5) newCSS.href = 'sunrise.css'; // Otherwise, use "day.css" // else { // newCSS.href = 'css/day.css'; // } // This line actually does the deed, and attaches the selected stylesheet $("head").append(newCSS); // This line isn't necessary, it's just showing the actual time in the demo. // $(".satellite").html(currentDate.toTimeString()); });