I have a webpage with an internal clock set up. Depending on the day of the week the clock cycles through a hue of a specific color each hour. Starting with the lightest hue as the first hour of the day then getting darker each hour.
On Sunday specifically I want to have it so the viewer doesnt have to wait for the colors to cycle through every hour, but have all the colors cycle through every hour on sunday.
In other words I need to translate the whole day into one hour. Here is my code. I would like help on how to proceed only for the code section on Sunday.
// wait until the page loads, // then initiate all of our code window.onload = runClock;
// all the clock JS goes inside here function runClock() {
/* GOALS
1. create a tool that gets the current time using `Date()`
1a. return the current hours, minutes, and seconds
2. create a tool that runs a timer in the page title using `getElementsByTagName()`
3. create a tool that adds content to the container
3a. update the content based on the current time
4. update our page in real time using `setInterval`
*/
// global variables
var now = checkTime();
// get the <title> from the document <head>
var pageTitle = document.head.getElementsByTagName('title')[0];
// get `<div id="container"></div>` from the <body>
var docBody = document.getElementById('body');
var container = document.getElementById('container');
// call all the functions on page load
updateTitle( now );
addContent( now );
// 4. update our page in real time using `setInterval`
setInterval( function(){
// update `now` with the information returned from checkTime()
now = checkTime();
// call all the functions
updateTitle( now );
addContent( now );
docBody.className="transition";
}, 1000 ); // 1000ms * 60 = 1 minute
function addContent( now ) {
var color = changeColor();
// add the color first
docBody.style.backgroundColor = color.color;
if ( now.day == 0 ) {
container.innerHTML += '<img src= "assets/img/mary.png" alt="virginmary">';
}
}
function changeColor() {
var time = checkTime();
var color;
if ( time.day == 0 ) {
// translate the whole day into one hour
// 1 hour now = 60/24 = 2.5 (you might round up or down, i.e., up to 3)
// if ( now.mintues < 3 ) { ... }
// if ( now.mintues >= 3 && now.minutes < 6 ) { ... }
// sunday
if (time.hours == 1) {
color = "#FFE5E5";
} else if (time.hours == 2) {
color = "#FFDDDD";
} else if (time.hours == 3) {
color = "#FFD4D4";
} else if (now.hours == 4) {
color = "#FFCCCC";
} else if (time.hours == 5) {
color = "#FFC3C3";
} else if (time.hours == 6) {
color = "#FFBBBB";
} else if (time.hours == 7) {
color = "#FFB3B3";
} else if (time.hours == 8) {
color = "#FFAAAA";
} else if (time.hours == 9) {
color = "#FFA1A1";
} else if (time.hours == 10) {
color = "#FF9999";
} else if (time.hours == 11) {
color = "#FF6E6E";
} else if (time.hours == 12) {
color = "#FF4444";
} else if (time.hours == 13) {
color = "#FF1A1A";
} else if (time.hours == 14) {
color = "#EE0000";
} else if (time.hours == 15) {
color = "#C30000";
} else if (time.hours == 16) {
color = "#990000";
} else if (time.hours == 17) {
color = "#6E0000";
} else if (time.hours == 18) {
color = "#440000";
} else if (time.hours == 19) {
color = "#470000";
} else if (time.hours == 20) {
color = "#3C0000";
} else if (time.hours == 21) {
color = "#310000";
} else if (time.hours == 22) {
color = "#250000";
} else if (time.hours == 23) {
color = "#1A0000";
} else if (time.hours == 24) {
color = "#190008";
}
}
// monday
if ( time.day == 1 ) {
if (time.hours == 1) {
color = "#FFF2E5";
} else if (time.hours == 2) {
color = "#FFE8D2";
} else if (time.hours == 3) {
color = "#FFDEBE";
} else if (time.hours == 4) {
color = "#FFDEBE";
} else if (time.hours == 5) {
color = "#FFD4AA";
} else if (time.hours == 6) {
color = "#FFCB96";
} else if (time.hours == 7) {
color = "#FFC182";
} else if (time.hours == 8) {
color = "#FFB76E";
} else if (time.hours == 9) {
color = "#FFAD5B";
} else if (time.hours == 10) {
color = "#FFA347";
} else if (time.hours == 11) {
color = "#FF9933";
} else if (time.hours == 12) {
color = "#FF8914";
} else if (time.hours == 13) {
color = "#F47A00";
} else if (time.hours == 14) {
color = "#D46A00";
} else if (time.hours == 15) {
color = "#B55B00";
} else if (time.hours == 16) {
color = "#964B00";
} else if (time.hours == 17) {
color = "#773B00";
} else if (time.hours == 18) {
color = "#582C00";
} else if (time.hours == 19) {
color = "#391C00";
} else if (time.hours == 20) {
color = "#4D1F00";
} else if (time.hours == 21) {
color = "#412100";
} else if (time.hours == 22) {
color = "#2D0B00";
} else if (time.hours == 23) {
color = "#190D00";
} else if (time.hours == 24) {
color = "#0D0D0D";
}
}
if ( time.day == 2 ) {
// sunday
if (time.hours == 1) {
color = "#F5E5FF";
} else if (time.hours == 2) {
color = "#EBCCFF";
} else if (time.hours == 3) {
color = "#E0B3FF";
} else if (time.hours == 4) {
color = "#D699FF";
} else if (time.hours == 5) {
color = "#CC80FF";
} else if (time.hours == 6) {
color = "#C266FF";
} else if (time.hours == 7) {
color = "#B84DFF";
} else if (time.hours == 8) {
color = "#AD33FF";
} else if (time.hours == 9) {
color = "#A31AFF";
} else if (time.hours == 10) {
color = "#9900FF";
} else if (time.hours == 11) {
color = "#8A00E6";
} else if (time.hours == 12) {
color = "#7A00CC";
} else if (time.hours == 13) {
color = "#6B00B3";
} else if (time.hours == 14) {
color = "#5C0099";
} else if (time.hours == 15) {
color = "#4D0080";
} else if (time.hours == 16) {
color = "#3D0066";
} else if (time.hours == 17) {
color = "#340069";
} else if (time.hours == 18) {
color = "#2A0055";
} else if (time.hours == 19) {
color = "#210041";
} else if (time.hours == 20) {
color = "#3D0066";
} else if (time.hours == 21) {
color = "#2E004D";
} else if (time.hours == 22) {
color = "#1F0033";
} else if (time.hours == 23) {
color = "#17002D";
} else if (time.hours == 24) {
color = "#0D001A";
}
}
if ( time.day == 3 ) {
// sunday
if (time.hours == 1) {
color = "#F9F2EC";
} else if (time.hours == 2) {
color = "#F1E3D4";
} else if (time.hours == 3) {
color = "#E9D3BD";
} else if (time.hours == 4) {
color = "#E1C3A6";
} else if (time.hours == 5) {
color = "#D9B48E";
} else if (time.hours == 6) {
color = "#D2A477";
} else if (time.hours == 7) {
color = "#CA9560";
} else if (time.hours == 8) {
color = "#C28548";
} else if (time.hours == 9) {
color = "#B0763B";
} else if (time.hours == 10) {
color = "#996633";
} else if (time.hours == 11) {
color = "#8A5C2E";
} else if (time.hours == 12) {
color = "#7B5229";
} else if (time.hours == 13) {
color = "#6C4824";
} else if (time.hours == 14) {
color = "#5D3E1F";
} else if (time.hours == 15) {
color = "#4F341A";
} else if (time.hours == 16) {
color = "#4d3319";
} else if (time.hours == 17) {
color = "#3a2612";
} else if (time.hours == 18) {
color = "#402A15";
} else if (time.hours == 19) {
color = "#271a0c";
} else if (time.hours == 20) {
color = "#312110";
} else if (time.hours == 21) {
color = "#22170B";
} else if (time.hours == 22) {
color = "#27190c";
} else if (time.hours == 23) {
color = "#130d06";
} else if (time.hours == 24) {
color = "#000000";
}
}
if ( time.day == 4 ) {
// sunday
if (time.hours == 1) {
color = "#ebfafa";
} else if (time.hours == 2) {
color = "#d6f5f5";
} else if (time.hours == 3) {
color = "#c2f0f0";
} else if (time.hours == 4) {
color = "#adebeb";
} else if (time.hours == 5) {
color = "#99e6e6";
} else if (time.hours == 6) {
color = "#85e0e0";
} else if (time.hours == 7) {
color = "#70dbdb";
} else if (time.hours == 8) {
color = "#5cd6d6";
} else if (time.hours == 9) {
color = "#5ad8d8";
} else if (time.hours == 10) {
color = "#45d4d4";
} else if (time.hours == 11) {
color = "#47d1d1";
} else if (time.hours == 12) {
color = "#33cccc";
} else if (time.hours == 13) {
color = "#30cfcf";
} else if (time.hours == 14) {
color = "#2eb8b8";
} else if (time.hours == 15) {
color = "#29a3a3";
} else if (time.hours == 16) {
color = "#248f8f";
} else if (time.hours == 17) {
color = "#1f7a7a";
} else if (time.hours == 18) {
color = "#196666";
} else if (time.hours == 19) {
color = "#135353";
} else if (time.hours == 20) {
color = "#0e3e3e";
} else if (time.hours == 21) {
color = "#0f3d3d";
} else if (time.hours == 22) {
color = "#0a2929";
} else if (time.hours == 23) {
color = "#051414";
} else if (time.hours == 24) {
color = "#051515";
}
}
if ( time.day == 5 ) {
// sunday
if (time.hours == 1) {
color = "#ecf9ec";
} else if (time.hours == 2) {
color = "#d8f3d8";
} else if (time.hours == 3) {
color = "#d9f2d9";
} else if (time.hours == 4) {
color = "#c6ecc6";
} else if (time.hours == 5) {
color = "#b3e5b3";
} else if (time.hours == 6) {
color = "#9fdf9f";
} else if (time.hours == 7) {
color = "#8cd98c";
} else if (time.hours == 8) {
color = "#79d279";
} else if (time.hours == 9) {
color = "#66cc66";
} else if (time.hours == 10) {
color = "#53c653";
} else if (time.hours == 11) {
color = "#40bf40";
} else if (time.hours == 12) {
color = "#39ac39";
} else if (time.hours == 13) {
color = "#34a435";
} else if (time.hours == 14) {
color = "#339933";
} else if (time.hours == 15) {
color = "#2d862d";
} else if (time.hours == 16) {
color = "#2b872b";
} else if (time.hours == 17) {
color = "#267326";
} else if (time.hours == 18) {
color = "#206020";
} else if (time.hours == 19) {
color = "#194d19";
} else if (time.hours == 20) {
color = "#1a4c1a";
} else if (time.hours == 21) {
color = "#133913";
} else if (time.hours == 22) {
color = "#123a12";
} else if (time.hours == 23) {
color = "#0d260d";
} else if (time.hours == 24) {
color = "#061306";
}
}
if ( time.day == 6 ) {
// sunday
if (time.hours == 1) {
color = "#fff0f8";
} else if (time.hours == 2) {
color = "#ffe5f2";
} else if (time.hours == 3) {
color = "#ffe5f3";
} else if (time.hours == 4) {
color = "#ffcce7";
} else if (time.hours == 5) {
color = "#ffb3db";
} else if (time.hours == 6) {
color = "#ff99cf";
} else if (time.hours == 7) {
color = "#ff80c4";
} else if (time.hours == 8) {
color = "#ff66b8";
} else if (time.hours == 9) {
color = "#ff4dac";
} else if (time.hours == 10) {
color = "#ff33a0";
} else if (time.hours == 11) {
color = "#ff1a94";
} else if (time.hours == 12) {
color = "#ff0088";
} else if (time.hours == 13) {
color = "#e6007a";
} else if (time.hours == 14) {
color = "#cc006d";
} else if (time.hours == 15) {
color = "#b3005f";
} else if (time.hours == 16) {
color = "#990052";
} else if (time.hours == 17) {
color = "#800044";
} else if (time.hours == 18) {
color = "#660036";
} else if (time.hours == 19) {
color = "#4d0029";
} else if (time.hours == 20) {
color = "#33001b";
} else if (time.hours == 21) {
color = "#33001a";
} else if (time.hours == 22) {
color = "#1a000d";
} else if (time.hours == 23) {
color = "#1a000e";
} else if (time.hours == 24) {
color = "#000000";
}
}
return {
color: color
};
}
// 2. create a tool that runs a timer in the page title using `getElementsByTagName()`
function updateTitle( now ) {
pageTitle.innerText = now.hours+":"+now.minutes+":"+now.seconds;
}
// 1. create a tool that gets the current time using `Date()`
// 1a. return the current hours, minutes, and seconds
function checkTime() {
now = new Date();
// see the Date() methods page for more options
// http://ift.tt/1AxqbNi
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
var day = now.getDay();
return {
hours : hours,
minutes : minutes,
seconds : seconds,
day : day
};
}
console.log(checkTime());
}
Aucun commentaire:
Enregistrer un commentaire