Color Clock renders time as hexadecimal color value

boing
1

[Read the post]

1 Like
2

In Flash? Did I wake up in 2006?

I sure hope so, because there are more than a few life mistakes I would like to avoid this time around

15 Likes
3

Maybe I’m just grumpy, but the damn page requires Flash to run the clock, and has Google analytics (like any other page these days, but seems overkill).

It seem to me this could be a couple of lines of javascript.
Oh. Wait. From http://whatcolourisit.scn9a.org :

function dotime(){

$("body").css({"transition": "all 0.8s", "-webkit-transition": "all 0.8s"});

var d = new Date();
var hours = d.getHours();
var mins = d.getMinutes();
var secs = d.getSeconds();

if (hours < 10){hours = "0" + hours};
if (mins < 10){mins = "0" + mins};
if (secs < 10){secs = "0" + secs};

hours.toString();
mins.toString();
secs.toString();

var hex = "#" + hours + mins + secs;

$("#t").html(hours +" : "+ mins +" : "+ secs);
$("#h").html(hex);

document.body.style.background = hex;

setTimeout(function(){ dotime();}, 1000);

}

Why wouldn’t the original poster do a few seconds of research to find a “better” implementation?
I know “better” is subjective, but the one I found is faster, requires no Flash, runs on more platforms
and has source that a javascript novice can examine.

11 Likes
4

Damn, you beat me to it.

5

“better” might be subjective without further context.

in this case the javascript implementation is objectively better on a number of important metrics including at least: accessibility, maintainability, page size, compatibility.

3 Likes
6

Check out Lea Verou’s HSL version which is more concise and does not use jQuery:
http://dabblet.com/gist/ed4f0a7dc7326e8e28b8

setInterval(function(){
	var d = new Date();
	var h = d.getHours();
	var m = d.getMinutes();
	var s = d.getSeconds();
	
	document.body.textContent = [h, m, s].map(function(a){ return a < 10? '0' + a : a}).join(':');
	
	// TODO: Shift lightness so that the color is dark at night and light in the day
	document.body.style.background = 'hsl(' + ~~(s*6) + ', ' + ~~(m*10/6) + '%, ' +  ~~(h*25/6) + '%)';
}, 1000);
3 Likes
7

Wait, you wanted an HTML5 one? I wonder if BoingBoing has anything on that?

5 Likes
8

So I looked at this colour clock thing on my iPad and all I get is a blank page. So I wait a few seconds. Then I reload the page. Still blank. So I close the tab and try again in a new tab. Still nothing. Look at comments, find someone saying it needs Flash. Well that explains it, I don’t have Flash, because Apple won’t allow it on iOS. But the site doesn’t tell me I need Flash or gracefully degrade in anyway, it just serves up blank page.

Is this colour clock from the dim and distant past when iOS didn’t exist, Firefox didn’t block Flash objects by default and force the user to explicitly allow them to run, and a large number of people hadn’t yet deliberately removed Flash?

1 Like
9

Fun concept, brilliant execution!

10

Yes, brilliant, except for all the issues hat have been mentioned in these comments.

2 Likes
11

Maybe I’m just old and bitter; but I remember when that counted as “better”; and those were better times. But, um, Rich Content, something, mumble, mumble.

12

This topic was automatically closed after 5 days. New replies are no longer allowed.