スロットマシーンのように数字が回転する、指定日までのカウンター！

JavaScript JavaScript 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>Counter</title>
<style type="text/css">
#waku div { float:left; }
</style>

<body>
<div id="waku">
  <div id="counter0"></div>
  <div id="counter1"></div>
  <div id="counter2"></div>
  <div>日</div>
  <div id="counter3"></div>
  <div id="counter4"></div>
  <div>時</div>
  <div id="counter5"></div>
  <div id="counter6"></div>
  <div>分</div>
  <div id="counter7"></div>
  <div id="counter8"></div>
  <div>秒</div>
  <br style="clear:both;">
</div>

<script type="text/Javascript">

Counter = function () {
  this.init.apply(this, arguments);
};

Counter.prototype.init = function (id, num, changeTime) {

  var imagePath = './img/';
  var imageType = '.gif';

  var i, g, e = document.getElementById(id);

  e.style.position = 'relative';
  e.style.zIndex  = '0';
  for (var i=0; i<10; i++) {
    g = document.createElement('IMG');
    g.alt = i +'';
    g.src = imagePath + i + imageType;
    g.style.position = 'absolute';
    e.appendChild(g);
  }
  e.style.width = g.offsetWidth + 'px';
  e.style.height = g.offsetHeight + 'px';
  e.style.overflow = 'hidden';

  this.num = e.childNodes;
  this.r  = g.offsetHeight / (2 * Math.tan(Math.PI/10));
  this.h = g.offsetHeight / 2|0;
  this.timerId = null;
  this.setNumber(num);
};
Counter.prototype.setNumber = function (num) {
  this.number = num % 10;
  var k = -36 * num -18;
  var i, s;
  for (i = 0; i < 10; i++) {
    y0 = Math.sin((k+i*36)*Math.PI/180)* this.r;
    y1 = Math.sin((k+i*36+36)*Math.PI/180)* this.r;
    z0 = this.r + (Math.cos((k+i*36)*Math.PI/180)* this.r)|0;
    s = this.num[i].style;
    s.top = this.h + y0 + 'px';
    s.height = Math.abs(y1-y0+1) + 'px';
    s.zIndex = z0+'';
  }
}
Counter.prototype.moveNumber = function (num, time, step) {
  var interval = (time*1000)/step;
  var sa = num - this.number;
  if (Math.abs(sa) > 5) sa = - 10 + sa;
  this.c = step;
  
  this.b = sa/step;
  this.d = num;
  this.timerId = setInterval((function(cb_){ return function() { cb_.change(); };})(this) , interval);
}
Counter.prototype.change = function () {
  this.setNumber(this.number + this.b);
  if (--this.c >  0) return;
  clearInterval(this.timerId);
  this.setNumber(this.d);
}

Number.prototype.addZero = function(n){ return ('000000000000'+ this).slice(-n); };


var num = []; for (i = 0; i<9; i++) num[i] = new Counter('counter'+i, 0);
var point = new Date(2010, 1 -1, 1, 0, 0, 0, 000);
var counter_str = '000000000';

var tId = setInterval(function() {
  var sa = (point- (new Date))/1000 |0;
  if (sa<0) {alert("osimai"); clearInterval(tId);}
  var sc = ( sa % 60).addZero(2);
  var mi = ( (sa / 60 |0) % 60).addZero(2);
  var ho = ( (sa / 3600|0) % 24).addZero(2);
  var dy = ((sa/(60*60*24)) |0).addZero(3);
  var str = dy + ho + mi +sc;
  
  for (var i=0; i<9; i++) {
    var a = counter_str.charAt(i);
    var b = str.charAt(i);
    if (a != b) num[i].moveNumber(b,0.5,10)
  }
  counter_str = str;

}, 1000);

</script>