-
Notifications
You must be signed in to change notification settings - Fork 0
/
index-faster.html
108 lines (92 loc) · 3.21 KB
/
index-faster.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html>
<head>
<title>Colour clock</title>
<script src="jquery-1.10.2.js"></script>
<script>
var resolution = 10; // Unit: 1/s
var getFormattedDate = function(date) {
return {
hours: ( "00" + date.getHours() ).slice(-2),
minutes: ( "00" + date.getMinutes() ).slice(-2),
seconds: ( "00" + date.getSeconds() ).slice(-2),
ms: ( "00" + date.getMilliseconds() ).slice(-3)
}
}
var getColor = function(date) {
date = Math.floor( date / resolution );
date = date.toString(16);
var colour = "#" + date.substring(date.length - 6, date.length)
return colour;
}
setInterval(function(){
var date = new Date();
var color = getColor( date.getTime() );
var formattedTime = getFormattedDate( date );
var colorR = color.substring(1,3);
var colorG = color.substring(3,5);
var colorB = color.substring(5,7);
$("body").css("background-color", color);
$("#time").text( formattedTime.hours + ":" + formattedTime.minutes + ":" + formattedTime.seconds + ":" + formattedTime.ms.substring(0,2) );
$("#color").text( color );
$("#colorMapR").css("background-color", "#"+ colorR +"0000").text( colorR );
$("#colorMapG").css("background-color", "#00"+ colorG +"00").text( colorG );
$("#colorMapB").css("background-color", "#0000"+ colorB +"").text( colorB );
}, resolution)
</script>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:200' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>
<style type="text/css" media="screen">
body {
font-family: 'Lato', 'Source Sans Pro', sans-serif;
color: #fff;
text-align: center;
}
article {
position: absolute;
margin-left: -280px;
width: 560px;
left: 50%;
top: 50%;
margin-top: -120px;
}
.colorComponent {
float: left;
margin-right: 0.5%;
width: 33%;
height: 34px;
font-size: 18px;
line-height: 34px;
border-radius: 5px;
}
.colorComponent:last-child {
margin-right: 0;
}
.box {
border-radius: 5px;
background: rgba(0,0,0,.05);
margin-bottom: 5px;
}
#time {
height: 120px;
line-height: 120px;
font-size: 100px;
}
#color {
font-size: 18px;
line-height: 34px;
}
</style>
</head>
<body>
<article>
<div id="time" class="box"></div>
<div id="color" class="box"></div>
<div id="colorMap">
<div id="colorMapR" class="colorComponent"></div>
<div id="colorMapG" class="colorComponent"></div>
<div id="colorMapB" class="colorComponent"></div>
</div>
</article>
</body>
</html>