Add prototype, spectrum and controls
parent
c4fdbbf13c
commit
690368c118
124
index.html
124
index.html
|
|
@ -6,7 +6,7 @@
|
|||
<meta name="viewport" content="user-scalable=yes,initial-scale=1" />
|
||||
<style>
|
||||
* { color: #fff; }
|
||||
body { transition: all 0.8s; }
|
||||
html, body, body > div { margin: 0; height: 100%; }
|
||||
|
||||
div { text-align: center; }
|
||||
|
||||
|
|
@ -15,9 +15,30 @@ h1 {
|
|||
font-size: 4em;
|
||||
}
|
||||
h2 { font-family: courier; }
|
||||
|
||||
.spectrum {
|
||||
height: 50px;
|
||||
background-color: #000;
|
||||
overflow: hidden;
|
||||
}
|
||||
.spectrum > div {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
Date.prototype.toColor = function() {
|
||||
Date.today = function() {
|
||||
now = new Date();
|
||||
now.setHours(0);
|
||||
now.setMinutes(0);
|
||||
now.setSeconds(0);
|
||||
now.setMilliseconds(0);
|
||||
|
||||
return now.getTime();
|
||||
};
|
||||
|
||||
Date.prototype.toHexColor = function() {
|
||||
var hours, minutes, seconds;
|
||||
|
||||
total_seconds = this.getHours() * 3600 + this.getMinutes() * 60 + this.getSeconds();
|
||||
|
|
@ -26,29 +47,98 @@ Date.prototype.toColor = function() {
|
|||
return "#" + ("000000" + hex.toString(16)).substr(-6)
|
||||
};
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
var time = document.querySelector('time')
|
||||
var h2 = document.querySelector('h2')
|
||||
Date.prototype.toRgbColor = function() {
|
||||
return "rgb(" + Math.round(this.getHours() * 255 / 24) + ", " + Math.round(this.getMinutes() * 255 / 60) + ", " + Math.round(this.getSeconds() * 255 / 60) + ")";
|
||||
};
|
||||
|
||||
function process() {
|
||||
var d = new Date();
|
||||
color = d.toColor();
|
||||
Date.prototype.toHslColor = function() {
|
||||
return "hsl(" + Math.round(this.getHours() * 360 / 24) + ", " + Math.round(this.getMinutes() + 20) + "%, " + Math.round(this.getSeconds() + 20) + "%)";
|
||||
}
|
||||
|
||||
time.textContent = d.toLocaleTimeString();
|
||||
h2.textContent = color;
|
||||
function WhatColorIsIt(mainDiv, toColor) {
|
||||
this.mainDiv = mainDiv
|
||||
this.toColor = toColor;
|
||||
this.running = false;
|
||||
|
||||
document.body.style.background = color;
|
||||
this.mainDiv.style.transition = 'all 0.8s';
|
||||
|
||||
this.spectrumDiv = document.createElement('div');
|
||||
this.spectrumDiv.className = 'spectrum';
|
||||
|
||||
this.controlsDiv = document.createElement('div');
|
||||
this.controlsDiv.className = 'controls';
|
||||
this.controlsDiv.style.cursor = 'pointer';
|
||||
this.controlsDiv.textContent = '>';
|
||||
this.controlsDiv.addEventListener('click', this.toggle.bind(this));
|
||||
|
||||
this.timeDiv = document.createElement('div');
|
||||
this.timeDiv.className = 'time';
|
||||
this.timeDiv.innerHTML = '<h1><time></time></h1><h2></h2>';
|
||||
|
||||
this.mainDiv.appendChild(this.spectrumDiv);
|
||||
this.mainDiv.appendChild(this.timeDiv);
|
||||
this.mainDiv.appendChild(this.controlsDiv);
|
||||
|
||||
this.current();
|
||||
};
|
||||
|
||||
WhatColorIsIt.prototype.spectrum = function(today) {
|
||||
var tomorrow = today + 86400000;
|
||||
var increment = (tomorrow - today) / this.spectrumDiv.offsetWidth;
|
||||
|
||||
for(var i = today; i < tomorrow; i += increment) {
|
||||
color = document.createElement('div');
|
||||
color.style.background = this.toColor(new Date(i));
|
||||
color.dataset.timestamp = i;
|
||||
|
||||
color.addEventListener('mouseenter', function(e) {
|
||||
this.process(new Date(parseInt(e.target.dataset.timestamp)))
|
||||
}.bind(this));
|
||||
|
||||
this.spectrumDiv.appendChild(color);
|
||||
}
|
||||
|
||||
process();
|
||||
setInterval(process, 1000);
|
||||
this.spectrumDiv.addEventListener('mouseenter', this.stop.bind(this));
|
||||
this.spectrumDiv.addEventListener('mouseleave', this.start.bind(this));
|
||||
};
|
||||
|
||||
WhatColorIsIt.prototype.current = function() {
|
||||
this.process(new Date());
|
||||
};
|
||||
|
||||
WhatColorIsIt.prototype.process = function(d) {
|
||||
color = this.toColor(d);
|
||||
|
||||
this.timeDiv.querySelector('time').textContent = d.toLocaleTimeString();
|
||||
this.timeDiv.querySelector('h2').textContent = color;
|
||||
|
||||
this.mainDiv.style.background = color;
|
||||
}
|
||||
|
||||
WhatColorIsIt.prototype.run = function() {
|
||||
this.spectrum(Date.today());
|
||||
this.start();
|
||||
};
|
||||
WhatColorIsIt.prototype.start = function() {
|
||||
this.running = true;
|
||||
this.controlsDiv.textContent = '||';
|
||||
this.current();
|
||||
this.interval = setInterval(this.current.bind(this), 1000);
|
||||
};
|
||||
WhatColorIsIt.prototype.stop = function() {
|
||||
this.running = false;
|
||||
this.controlsDiv.textContent = '>';
|
||||
clearInterval(this.interval);
|
||||
};
|
||||
WhatColorIsIt.prototype.toggle = function() { this.running ? this.stop() : this.start() }
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
new WhatColorIsIt(document.getElementById('whatcolorisit'),
|
||||
function(d) { return d.toHslColor(); }).run();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<h1><time></time></h1>
|
||||
<h2></h2>
|
||||
</div>
|
||||
<div id="whatcolorisit"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue