I would like the time of day to control color with the seconds to control gradience like in the pic

var clock, hour, min, sec, color;

function displayTime(){
clock=new Date();
hour=clock.getHours(),
min=clock.getMinutes(),
sec=clock.getSeconds();

//if single digit, add 0 to the left
if(hour<=9) hour='0'+hour;
if(min<=9) min='0'+min;
if(sec<=9) sec='0'+sec;


color='#'+hour+min+sec;
//colorText=color.split().join(":");


function changeClock() {
    document.getElementById("time").innerHTML=color;
}

function returnClock() {
    document.getElementById("time").innerHTML=""+hour+":"+min+":"+sec+"";
}





//function mouseOut() {
//    document.getElementById("time").innerHTML=""+hour+":"+min+":"+sec+"";
//}

//document.getElementById("time").addEventListener("mouseout", mouseOut);

//set background color
document.body.style.background.= color;
document.getElementById('time').innerHTML=""+hour+":"+min+":"+sec+"";

//document.getElementById("time").addEventListener("mouseout", returnClock);

document.getElementById("time").addEventListener("mouseover", changeClock);


//set interval
setInterval(displayTime,1000);

}


displayTime();

in this line
document.body.style.background.= color;
you have error , you have dot after background just remove it.
document.body.style.background = color;

yeah i was testing out some methods and forgot to edit it back

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.