Activate your free membership today | Log-in

Friday, November 20th, 2009

Friday Fun; Scroll Clock

Category: Fun, MooTools

<p>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:

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

Related Content:

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.