I'm currently working on a JavaScript project to dynamically change the layout of my webpage at specific times of the day. I have also implemented functionality to revert back to the default style if any manual changes are made.
However, I've encountered an issue where upon clicking one of the buttons to manually change the style and then navigating to another page, the style is completely missing. Can anyone provide assistance with this problem?
Below is the code snippet:
// JavaScript Document
var mode = 0;
function webload() {
if(mode == 0)
{
var d = new Date();
var n = d.getHours();
if (7 <= n && n < 18)
{
day();
}
else
{
night();
}
}
elif(mode == 1)
{
day();
}
elif(mode == 2)
{
night();
}
elif(mode == 3)
{
highcon()
}
}
function day() {
document.body.style.background = 'url(images/day_bg_top.png) top scroll no-repeat, url(images/day_bg_bot.png) bottom scroll repeat-x, #53a3ff';
document.getElementById('spacer').style.background = '#53a3ff';
document.getElementById('spacer2').style.background = '#53a3ff';
mode = 1
}
function night() {
document.body.style.background = 'url(images/night_bg_top.png) top scroll no-repeat, url(images/night_bg_bot.png) bottom scroll repeat-x, #000c36';
document.getElementById('spacer').style.background = '#000c36';
document.getElementById('spacer2').style.background = '#000c36';
mode = 2
}
function highcon() {
document.body.style.background = 'url(images/night_bg_top.png) top scroll no-repeat, url(images/night_bg_bot.png) bottom scroll repeat-x, #000c36';
document.getElementById('spacer').style.background = '#000c36';
document.getElementById('spacer2').style.background = '#000c36';
mode = 3
}