Firejune

이것은 Toki Woki에서 만든 스크롤 시계입니다. <div> 요소의 overflow 속성을 절묘하게 이용하여 만들었습니다. 소스를 보니 MooTools 라이브러리를 기반으로 슈퍼 클래스를 상속하여 사용하고 있습니다. 이것을 Prototype 라이브러리로 다시 작성해 보았습니다. :

(function() {
  var barDim = 64, sbDim = 18;
  var Bar = Class.create({
    initialize: function(dir) {
      this.dir = dir;
      var dim = dir == 'v' ? barDim : (Prototype.Browser.Gecko ? barDim : barDim + sbDim);
      this.holder = new Element('div', {style: 'width:' + (dir == 'h' ? dim : sbDim) + 'px; height:' + (dir == 'h' ? sbDim : dim) + 'px; overflow: auto; float: left'});
      this.content = new Element('div', {style: 'line-height: 0'}).update(' ');
      this.activate(true, true);
      this.holder.insert(this.content);
    },
    activate:function(b, now) {
      var side = this.dir == 'h' ? 'width' : 'height';
      if (now) this.content.setStyle(side + ':' + (b ? barDim + sbDim : barDim / 2) + 'px');
      else this.content.morph(side + ':' + (b ? barDim * 2 : barDim / 2) + 'px');
    }
  });
  var HBar = Class.create(Bar, {
    initialize: function($super){
      $super('h');
      this.holder.setStyle('margin-left:' + sbDim + 'px; margin-right: ' + sbDim + 'px');
    }
  });
  var VBar = Class.create(Bar, {
    initialize: function($super, push){
      $super('v');
      push && this.pushRight();
    },
    pushRight:function() {
      this.holder.setStyle('margin-left:' + barDim + 'px');
    }
  });
  var Digit = Class.create({
    initialize: function(push) {
      var holder = this.holder = new Element('div', {style: 'width:' + (barDim + 2 * sbDim) + 'px; float: left; margin-right: 5px'});
      this.bars = [new HBar(), new VBar(), new VBar(true), new HBar(), new VBar(), new VBar(true), new HBar()].each(function(it) { holder.insert(it.holder);});
      this.lights = [
        [1, 1, 1, 0, 1, 1, 1],//0
        [0, 0, 1, 0, 0, 1, 0],//1
        [1, 0, 1, 1, 1, 0, 1],//2
        [1, 0, 1, 1, 0, 1, 1],//3
        [0, 1, 1, 1, 0, 1, 0],//4
        [1, 1, 0, 1, 0, 1, 1],//5
        [1, 1, 0, 1, 1, 1, 1],//6
        [1, 0, 1, 0, 0, 1, 0],//7
        [1, 1, 1, 1, 1, 1, 1],//8
        [1, 1, 1, 1, 0, 1, 1] //9
      ];
      push && this.pushRight();
    },
    show: function(n) {
      n = Math.floor(n);
      n = n % 10;
      var light = this.lights[n];
      this.bars.each(function(it, index) { it.activate(light[index] == 1); });
    },
    pushRight: function() {
      this.holder.setStyle('margin-left: 12px');
    }
  });
  function showTime() {
    var now = new Date();
    h1.show(now.getHours()/10);
    h2.show(now.getHours());
    m1.show(now.getMinutes()/10);
    m2.show(now.getMinutes());
    s1.show(now.getSeconds()/10);
    s2.show(now.getSeconds());
  }
  var h1 = new Digit(), h2 = new Digit(), m1 = new Digit(true), m2 = new Digit(), s1 = new Digit(true), s2 = new Digit();
  $('main').insert(h1.holder).insert(h2.holder).insert(m1.holder).insert(m2.holder).insert(s1.holder).insert(s2.holder);
  showTime();
  setInterval(showTime, 1000);
})();

덧. IE에서는 작동하지 않습니다.