Friday, November 20th, 2009

Friday Fun; Scroll Clock

Category: Fun, MooTools

This is in the crazy but fun category, so I had to post this on a Friday. Toki Woki Scroll Clock:

scrollclock

Amazing what folks do with div overflows :)

All in a few lines of MooTools-used-JS:

javascript
< view plain text >
  1. var h1, h2, m1, m2, s1, s2;
  2. window.addEvent('domready', function() {
  3.     h1=new Digit();
  4.     h2=new Digit();
  5.     m1=new Digit();
  6.     m1.pushRight();
  7.     m2=new Digit();
  8.     s1=new Digit();
  9.     s1.pushRight();
  10.     s2=new Digit();
  11.     $('main').adopt(h1.getElement(), h2.getElement(), m1.getElement(), m2.getElement(), s1.getElement(), s2.getElement());
  12.     showTime();
  13.     setInterval('showTime()', 1000);
  14. });
  15. function showTime() {
  16.     var now=new Date();
  17.     h1.show(now.getHours()/10);
  18.     h2.show(now.getHours());
  19.     m1.show(now.getMinutes()/10);
  20.     m2.show(now.getMinutes());
  21.     s1.show(now.getSeconds()/10);
  22.     s2.show(now.getSeconds());
  23. }
  24. var barDim=120;
  25. var sbDim=18;
  26. var Bar = new Class({
  27.     initialize: function(dir) {
  28.         this.dir = dir;
  29.         var dim=dir=='v' ? barDim : (Browser.Engine.gecko ? barDim : barDim+sbDim);
  30.         this.holder=new Element('div', {styles:{width:dir=='h' ? dim : sbDim, height:dir=='h' ? sbDim : dim, overflow:'auto', float:'left'}});
  31.         this.content=new Element('div', {html:'&nbsp;'});
  32.         this.activate(true, true);
  33.         this.holder.adopt(this.content);
  34.     },
  35.     activate:function(b, now) {
  36.         var side=this.dir=='h' ? 'width' : 'height';
  37.         if (now) this.content.setStyle(side, b ? barDim+sbDim : barDim/2);
  38.         else this.content.tween(side, b ? barDim*2 : barDim/2);
  39.     },
  40.     getElement:function() {
  41.         return this.holder;
  42.     }
  43. });
  44. var HBar = new Class({
  45.     Extends: Bar,
  46.     initialize: function(){
  47.         this.parent('h');
  48.         this.holder.setStyles({'margin-left': sbDim, 'margin-right': sbDim});
  49.     }
  50. });
  51. var VBar = new Class({
  52.     Extends: Bar,
  53.     initialize: function(){
  54.         this.parent('v');
  55.     },
  56.     pushRight:function() {
  57.         this.holder.setStyle('margin-left', barDim);
  58.     }
  59. });
  60. var Digit=new Class({
  61.     initialize: function() {
  62.         var holder=this.holder=new Element('div', {styles:{width: barDim+2*sbDim, float:'left', 'margin-right':20}});
  63.         this.bars=[new HBar(), new VBar(), new VBar(), new HBar(), new VBar(), new VBar(), new HBar()];
  64.         this.bars[2].pushRight();
  65.         this.bars[5].pushRight();
  66.         this.bars.each(function(it) {holder.adopt(it.getElement());});
  67.         this.lights=[
  68.             [1, 1, 1, 0, 1, 1, 1],//0
  69.             [0, 0, 1, 0, 0, 1, 0],//1
  70.             [1, 0, 1, 1, 1, 0, 1],//2
  71.             [1, 0, 1, 1, 0, 1, 1],//3
  72.             [0, 1, 1, 1, 0, 1, 0],//4
  73.             [1, 1, 0, 1, 0, 1, 1],//5
  74.             [1, 1, 0, 1, 1, 1, 1],//6
  75.             [1, 0, 1, 0, 0, 1, 0],//7
  76.             [1, 1, 1, 1, 1, 1, 1],//8
  77.             [1, 1, 1, 1, 0, 1, 1] //9
  78.         ];
  79.     },
  80.     show: function(n) {
  81.         n=Math.floor(n);
  82.         n=n%10;
  83.         var light=this.lights[n];
  84.         this.bars.each(function(it, index) {
  85.             it.activate(light[index]==1);
  86.         });
  87.     },
  88.     pushRight:function() {
  89.         this.holder.setStyle('margin-left', '50px');
  90.     },
  91.     getElement:function() {
  92.         return this.holder;
  93.     }
  94. });

Posted by Dion Almaer at 7:35 am
7 Comments

++++-
4.5 rating from 45 votes

7 Comments »

Comments feed TrackBack URI

This made my day.

Comment by ywg — November 20, 2009

Haha. Awesome!

Comment by WillPeavy — November 20, 2009

Doesn’t work for me. FF 3.5.5 XP SP3

Comment by tj111 — November 20, 2009

Awesome.

(FF 3.6b3)

Comment by Darkimmortal — November 20, 2009

Saw this earlier from the Mootools twitter feed, very cool! Not exactly useful, but still awesome, and some very clean code too.

Comment by MattCoz — November 20, 2009

@tj111

Works for me in FF3.5.5 on XP SP3.

Comment by jlizarraga — November 20, 2009

looks much better on mac with those blue scroller. on windows, it’s just plain grey. looks awesome and definitely a fun project.

Comment by bizsimon — November 25, 2009

Leave a comment

You must be logged in to post a comment.