Stopwatch in CSS • Hacker News Board

Re: Stopwatch in CSS

#11

Post by raganesh » Fri, Nov 15, 2013, 9:36 AM UTC

This is cool. But should the fourth section (sub-seconds) be running from 0-99? It is currently running from 0-59, too.

Sorry about the nitpick; this really is a cool implementation :-)

Re: Stopwatch in CSS

#12

Post by mctx » Fri, Nov 15, 2013, 9:38 AM UTC

hayksaakian wrote: post #3

oneeyedpigeon wrote: post #2

is something supposed to happen when I press play (safari, iPad)?

The time starts ticking (chrome beta, android) It'd be cool if I could read the time via JS

You can - try something like this:

parseInt(getComputedStyle($('#seconds'), ':after').top)/-76

(see https://gist.github.com/alexlouden/7481780 for full)

Re: Stopwatch in CSS

#13

Post by mmahemoff » Fri, Nov 15, 2013, 9:40 AM UTC

There's actually a genre of pure-CSS games [1]. CSS3 Panic was interesting as (I think) the first one to keep score.

1. http://thejavascripthomework.wordpress.com/2012/10/13/15-pur...

2. http://cssdeck.com/labs/css-panic-game

Re: Stopwatch in CSS

#14

Post by csmuk » Fri, Nov 15, 2013, 9:40 AM UTC

Goes absolutely bat shit in IE11 flickering and all sorts going on.

Then again what do I expect?

Works fine in Chrome and Firefox.

Re: Stopwatch in CSS

#15

Post by mattmanser » Fri, Nov 15, 2013, 10:07 AM UTC

I love how the stop button is just a link to the page. Smart.

Re: Stopwatch in CSS

#16

Post by vog » Fri, Nov 15, 2013, 11:01 AM UTC

Nice work, but I find it a bit disappointing that the first thing I see on a "CSS-only" site is a big warning from NoScript. I think this site would make its point more clear if it didn't contain any JavsScript, even though it's just for Google Analytics.

Re: Stopwatch in CSS

#17

Post by Kiro » Fri, Nov 15, 2013, 11:06 AM UTC

mattmanser wrote: post #15

I love how the stop button is just a link to the page. Smart.

And how the pause button is... nothing, just to remove target from the start button.

Re: Stopwatch in CSS

#18

Post by Kiro » Fri, Nov 15, 2013, 11:07 AM UTC

maho wrote: post #4

For me, the button font doesn't load and the background transisiotions are, as always, extremely sluggish. (Firefox 17 ESR)

Why are you stuck with ESR?

Re: Stopwatch in CSS

#19

Post by corresation » Fri, Nov 15, 2013, 11:32 AM UTC

aimhb wrote: post #7

Great example of a cool trick using completely the wrong tool for the job.

Whether it is the wrong tool is arguable (it is a clever declarative implementation). But regardless, demos such as this primarily demonstrate features and functions of a technology in a novel way, and it seems likely many who view will have a 'you can do that with CSS?' reaction, perhaps taking it to add to more traditional implementations.

Re: Stopwatch in CSS

#20

Post by paullaros » Fri, Nov 15, 2013, 12:02 PM UTC

raganesh wrote: post #11

This is cool. But should the fourth section (sub-seconds) be running from 0-99? It is currently running from 0-59, too. Sorry about the nitpick; this really is a cool implementation :-)

Updated! Thanks for your feedback.