55 lines
1.2 KiB
HTML
55 lines
1.2 KiB
HTML
<!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>
|