Глобальные переменные underfined

Необходимо сделать так, чтоб background-color в css менялся каждую секунду и был привязан к текущему значению час/минута/секунда. Все ок, но в моем коде все переменные локальные. Пытаюсь их сделать глобальными, но выдает ошибку, что в css значения для background-color underfined. Каким образом их корректно преобразовать в глобальные переменные?

$(document).ready(function(){

var seconds_glob;
var minutes_glob;
var hours_glob;

var one = setInterval(function()
{
    var seconds = new Date().getSeconds();
    var seconds_loc = $('.sec').html((seconds < 10 ? "0" : "" ) + seconds);
    seconds_glob = seconds_loc;
}, 1000);

var two = setInterval(function()
{
var minutes = new Date().getMinutes();
    var minutes_loc = $('.min').html((minutes < 10 ? "0" : "" ) + minutes + ':');
    minutes_glob = minutes_loc;
}, 1000);

var three = setInterval(function()
{
var hours = new Date().getHours();
    var hours_loc = $('.hours').html((hours < 10 ? "0" : "" ) + hours + ':');
    hours_glob = hours_loc;
}, 1000);

setInterval(function()
{
var hours = new Date().getHours();
var rednum = ((Math.round(255 * ((hours) / 23)))).toString(16).substr(-2);
$('.red').html((rednum < 10 ? '0' : '') + rednum);
}, 1000);

setInterval(function()
{
var minutes = new Date().getMinutes();
var greennum = ((Math.round(255 * ((minutes) / 59)))).toString(16).substr(-2);
$('.green').html((greennum < 10 ? '0' : '') + greennum);
}, 1000);

setInterval(function ()
{
var seconds = new Date().getSeconds();
var bluenum = ((Math.round(255 * ((seconds) / 60)))).toString(16).substr(-2);
$('.blue').html((bluenum < 10 ? '0' : '') + bluenum);
}, 1000);
var back = '#' + hours_glob + minutes_glob + seconds_glob;
$('body').css('background-color', back)
})

РЕШЕНИЕ Получилось переопределить значение локальной переменной в глобальную через window. использование без var не помогает. В итоге, код следующий

$(document).ready(function(){

 setInterval(function()
{
 var seconds = new Date().getSeconds();
 $('.sec').html((seconds < 10 ? "0" : "" ) + seconds);
}, 1000);

 setInterval(function()
{
var minutes = new Date().getMinutes();
$('.min').html((minutes < 10 ? "0" : "" ) + minutes + ':');
}, 1000);

 setInterval(function()
{
var hours = new Date().getHours();
$('.hours').html((hours < 10 ? "0" : "" ) + hours + ':');
}, 1000);

 setInterval(function()
{
var hours = new Date().getHours();
var rednum = ((Math.round(255 * ((hours) / 23)))).toString(16).substr(-2);
var red = $('.red').html((rednum < 10 ? '0' : '') + rednum);
window.red_gl = (rednum < 10 ? '0' : '') + rednum;
}, 1000);

 setInterval(function()
{
var minutes = new Date().getMinutes();
var greennum = ((Math.round(255 * ((minutes) / 59)))).toString(16).substr(-2);
var green = $('.green').html((greennum < 10 ? '0' : '') + greennum);
window.green_gl = (greennum < 10 ? '0' : '') + greennum;
}, 1000);

 setInterval(function ()
{
var seconds = new Date().getSeconds();
var bluenum = ((Math.round(255 * ((seconds) / 60)))).toString(16).substr(-2);
var blue = $('.blue').html((bluenum < 10 ? '0' : '') + bluenum);
window.blue_gl = (bluenum < 10 ? '0' : '') + bluenum;
}, 1000);

 setInterval(function ()
{
var backgr = '#' + window.red_gl + window.green_gl + window.blue_gl;
$('body').css('background-color', backgr);
}, 1000);

})