Change CSS of HTML on computer timing

Question

I have three CSS with me in one HTML, morning.css, evening.css & night.css..

My requirement is that, once visitor visits the website, the css should change according to visitor PC timing...

Morning.css --> 6.00hrs - 15.00hrs
Evening.css --> 15.00hrs - 19.00 hrs
Night.css --> 19.00hrs - 6.00hrs

Can anyone help me with this..??? My requirement is on load not on button click

Include all styles in the page and change class of `` element with JavaScript based on the current time. — VisioN, Oct 16 '15 at 10:04
@DhawalMhatre Do some research, try it yourself, and only if you can't, come back with what you tried and we will help you — sailens, Oct 16 '15 at 10:07
Possible duplicate of [How do I switch my CSS stylesheet using jQuery?](http://stackoverflow.com/questions/7846980/how-do-i-switch-my-css-stylesheet-using-jquery) — Alex, Oct 16 '15 at 10:09
@DhawalMhatre To give you a hint, the JavaScript code is pretty simple: `var hours = new Date().getHours(); if (hours >= 6 && hours < 15) { ... }`, etc. — VisioN, Oct 16 '15 at 10:09

Yuriy Yakym · Answer 1 · 2015-10-16T10:12:14.840

0

You can use for example function like this:

function applyClass(){
   var date = new Date();
   var hour = date.getHours();
   if(hour >= 6 && hour < 15) {
      // apply 'morning' class to body
   } else if(hour >= 15 && hour < 19) {
      // apply 'evening' class to body
   } else {
      // apply 'night' class to body
   }
}

How to append class to DOM element you can easily find on another thread of stackoverflow

edited Oct 16 '15 at 10:12

answered Oct 16 '15 at 10:10

Yuriy Yakym

3,616
17
30

What will happen if now `hour` is `6` or `15`? Night? – VisioN Oct 16 '15 at 10:11

hywak · Answer 2 · 2015-10-16T10:18:50.057

0

You need to use JS or any other programming language like php to achieve this.

For me easiest way will be loading all 3 scripts and adding class to body depands on hour.

<script>
window.onload = function(){
    var d = new Date();
    var h = d.getHours();
    if(h >= 6 && <= 15) {
        document.body.setAttribute('class','morning');
    }
}
</script>

edited Oct 16 '15 at 10:18

answered Oct 16 '15 at 10:11

hywak

890
1
14
27

1

`document.body` is shorter, innit? Whereas `className` property was developed specifically to amend element's class. – VisioN Oct 16 '15 at 10:12

score 0 · Accepted Answer · answered Oct 16 '15 at 10:14

You can write a function which will set the class to body like the following:

function setTimingClass() {
    var hour = new Date().getHours();
    var cls;
    if (hour >= 6 && hour <= 14) {
        cls = 'morning';
    } else if (hour >= 15 && hour <= 18) {
        cls = 'evening';
    } else {
        cls = 'night';
    }

    document.body.className = document.body.className + ' ' + cls;

}

And call the function on body's onload. And then use this classes in your css file to style accordingly

well this only changes the body's class. You probably can do something similar and change the REL of a LINK tag to switch style sheets, but I don't remember if that changes the styles dynamically. — Nelson, Oct 17 '15 at 05:12

score 0 · Answer 4 · answered Oct 16 '15 at 10:15

With this function you can check time and class to the dom element

(function(){
    var currentdate = new Date(); 
    var datetime = currentdate.getHours();
    if(datetime >=6 && datetime<15){
     // moning class
    }
        else if(datetime >=15 && datetime<19){
     // evening classes
    }
    else{
     // night class
    }
    alert(datetime)
    }());

jsfiddle

Change CSS of HTML on computer timing

4 Answers4