112 lines
4.3 KiB
JavaScript
112 lines
4.3 KiB
JavaScript
//this for slider based - setting up slider
|
|
var slider = document.getElementById("myRange");
|
|
var output = document.getElementById("demo");
|
|
output.innerHTML = slider.value;
|
|
|
|
slider.oninput = function() {
|
|
output.innerHTML = this.value;
|
|
}
|
|
|
|
//Get time funtion - it passes time to the animation control function gettimeofday
|
|
function updatetime() {
|
|
var now = new Date();
|
|
gettimeofday(now.getHours());
|
|
//reset the slider to the actual time
|
|
slider.value = now.getHours();
|
|
output.innerHTML = now.getHours();
|
|
}
|
|
|
|
//Animation control function - you could split these into rise and set funtions but I have'nt done that yet
|
|
function gettimeofday(now) {
|
|
hour = now;
|
|
if (hour >= 0 && hour < 5) {
|
|
timeofdaypercent = hour - 0;
|
|
timeofdaypercent = (timeofdaypercent / 4) * 100;
|
|
var moon = document.getElementById('moon');
|
|
var moonheight = (timeofdaypercent * 2.5) + 50;
|
|
moon.style.top = moonheight + "px";
|
|
var sun = document.getElementById('sun');
|
|
sun.style.top = "450px";
|
|
document.body.style.backgroundColor = "#002551";
|
|
var world = document.getElementById('world');
|
|
world.style.borderBottom = "5px solid #67a8f1";
|
|
document.getElementById('toggle-label-left').style.color = "#d3d3d3";
|
|
document.getElementById('toggle-label-right').style.color = "#d3d3d3";
|
|
document.getElementsByClassName('simtime')[0].style.color = "#d3d3d3";
|
|
}
|
|
if (hour >= 5 && hour < 12) {
|
|
timeofdaypercent = hour - 5;
|
|
timeofdaypercent = (timeofdaypercent / 7) * 100;
|
|
var sun = document.getElementById('sun');
|
|
var sunheight = 300 - (timeofdaypercent * 2.9);
|
|
sun.style.top = sunheight + "px";
|
|
var moon = document.getElementById('moon');
|
|
moon.style.top = "400px";
|
|
document.body.style.backgroundColor = "#f4c042";
|
|
var world = document.getElementById('world');
|
|
world.style.borderBottom = "5px solid #7a6021";
|
|
document.getElementById('toggle-label-left').style.color = "#7a6021";
|
|
document.getElementById('toggle-label-right').style.color = "#7a6021";
|
|
document.getElementsByClassName('simtime')[0].style.color = "#7a6021";
|
|
}
|
|
if (hour >= 12 && hour < 19) {
|
|
timeofdaypercent = hour - 12;
|
|
timeofdaypercent = (timeofdaypercent / 7) * 100;
|
|
var sun = document.getElementById('sun');
|
|
var sunheight = (timeofdaypercent * 2.9) + 50;
|
|
sun.style.top = sunheight + "px";
|
|
var moon = document.getElementById('moon');
|
|
moon.style.top = "400px";
|
|
document.body.style.backgroundColor = "#f4c042";
|
|
var world = document.getElementById('world');
|
|
world.style.borderBottom = "5px solid #7a6021";
|
|
document.getElementById('toggle-label-left').style.color = "#7a6021";
|
|
document.getElementById('toggle-label-right').style.color = "#7a6021";
|
|
document.getElementsByClassName('simtime')[0].style.color = "#7a6021";
|
|
}
|
|
if (hour >= 19 && hour <= 24) {
|
|
timeofdaypercent = hour - 20;
|
|
timeofdaypercent = (timeofdaypercent / 5) * 100;
|
|
var moon = document.getElementById('moon');
|
|
var moonheight = 200 - (timeofdaypercent * 2.5) + 50;
|
|
moon.style.top = moonheight + "px";
|
|
var sun = document.getElementById('sun');
|
|
sun.style.top = "450px";
|
|
document.body.style.backgroundColor = "#002551";
|
|
var world = document.getElementById('world');
|
|
world.style.borderBottom = "5px solid #67a8f1";
|
|
document.getElementById('toggle-label-left').style.color = "#d3d3d3";
|
|
document.getElementById('toggle-label-right').style.color = "#d3d3d3";
|
|
document.getElementsByClassName('simtime')[0].style.color = "#d3d3d3";
|
|
}
|
|
}
|
|
|
|
|
|
//Start the loop going based of real time
|
|
updatetime();
|
|
var timeloop = setInterval(updatetime, 1000);
|
|
|
|
//Toggle switch functions
|
|
var togglestate=0;
|
|
document.getElementsByClassName('toggle')[0].onclick = function() {
|
|
this.classList.toggle('on');
|
|
if (togglestate == 0) {
|
|
togglestate = 1;
|
|
clearInterval(timeloop);
|
|
slider.oninput = function() {
|
|
output.innerHTML = this.value;
|
|
gettimeofday(this.value);
|
|
}
|
|
document.getElementById('slidecontainer').style.maxHeight = "300px";
|
|
document.getElementById('toggle-label-left').style.opacity = "0.2";
|
|
document.getElementById('toggle-label-right').style.opacity = "1";
|
|
} else if (togglestate == 1) {
|
|
togglestate = 0;
|
|
updatetime();
|
|
timeloop = setInterval(updatetime, 1000);
|
|
slider.oninput = null;
|
|
document.getElementById('slidecontainer').style.maxHeight = "0px";
|
|
document.getElementById('toggle-label-left').style.opacity = "1";
|
|
document.getElementById('toggle-label-right').style.opacity = "0.2";
|
|
}
|
|
} |