вся отрисовка действий скрипта находится в объекте настроек.
<style>
.morning { color: #BADA55 }
.day { color: lime }
.night { color: yellow }
.evening { color: #757575 }
</style>
<div class="changeable"> я меняю цвет! это как ёлка, только я как div </div>
<span class="changeable">и я тоже :)</span>
<script>
// настройки
window['depended class options'] = {
'onchange': function(time, lastTime){ // тут отображаем класс на указанных элементах
Array. // всем
prototype. // элементам
forEach. // с классом, имеющим "changeable"
call(document.querySelectorAll("*[class*=changeable]"),
function(element){
element.classList.add(time); // добавить в класс текущее время
if(lastTime){ // и, если есть старое (при запуске старого нет)
element.classList.remove(lastTime); // удалить его.
}
});
},
'interval': 1e4*60 // интервал проверки - 10 минут
};
(function(d){function e(){var e=f;a:{var b,g=(new Date).getHours(),a;for(b in c)if("string"===typeof c[b]&&(a=b.split("-"),c[b]=[+a[0],+a[1],c[b]]),a=c[b],g>=a[0]&&g<a[1]){f=a[2];break a}f=void 0}d.onchange&&d.onchange.call(void 0,f,e)}var f,c={"6-12":"morning","12-18":"day","18-24":"evening","0-25":"night"};e();d.id=setInterval(e,d.interval)})(window["depended class options"]);
</script>
