guillaume
/
whatcolorisit
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

First simple version

master
Guillaume Dott 2015-10-02 16:34:55 +02:00
commit c4fdbbf13c
2 changed files with 54 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
favicon.ico 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

54
index.html 100644
View File

@ -0,0 +1,54 @@
<!doctype html>
<html>
<head>
<title>What color is it?</title>
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=yes,initial-scale=1" />
<style>
* { color: #fff; }
body { transition: all 0.8s; }
div { text-align: center; }
h1 {
font-family: Verdana, Arial, sans-serif;
font-size: 4em;
}
h2 { font-family: courier; }
</style>
<script type="text/javascript">
Date.prototype.toColor = function() {
var hours, minutes, seconds;
total_seconds = this.getHours() * 3600 + this.getMinutes() * 60 + this.getSeconds();
var hex = Math.floor(total_seconds * 0xFFFFFF / 86400)
return "#" + ("000000" + hex.toString(16)).substr(-6)
};
document.addEventListener("DOMContentLoaded", function() {
var time = document.querySelector('time')
var h2 = document.querySelector('h2')
function process() {
var d = new Date();
color = d.toColor();
time.textContent = d.toLocaleTimeString();
h2.textContent = color;
document.body.style.background = color;
}
process();
setInterval(process, 1000);
});
</script>
</head>
<body>
<div>
<h1><time></time></h1>
<h2></h2>
</div>
</body>
</html>