<html>
  <script type="text/javascript">
    var timer = {
      ms : 0,
      offset : 0,
      interval_obj : null,
      current_time : '',
      init : function(){
        this.ms           = 0;
        this.offset       = 0;
        this.id           = this.id || 'my_timer';
        //this.show_area    = this.show_area || null;
        //this.record_area  = this.record_area || null;
        this.interval_obj = setInterval(this.id + '.run()', 10);
        this.current_time = '';
        /*
        switch(this.record_area.tagName){
          case 'TEXTAREA':
            this.record_area.value = '';
            break;
          default:
            this.record_area.innerHTML = '';
            break;
        }
        */
      },
      begin : function(){
        this.offset = (this.offset == 1) ? 0 : 1;
      },
      run : function(){
        this.show(this.current_time);
        this.ms += this.offset;
      },
      get_current_time : function(){
        var current_ms = this.ms;
        
        var time_rule  = new Array(360000, 6000, 100, 1);
        
        var show_value = new Array();
        var show_value_part = '';
        
        for(var i in time_rule){
          show_value_part = Math.floor(current_ms / time_rule[i]);
          current_ms = current_ms % time_rule[i];
          show_value.push((show_value_part < 10) ? '0' + show_value_part : show_value_part);
        }
        this.current_time = show_value.join(':');
      },
      show : this.show || function(){
        this.get_current_time();
        return this.current_time;
      },
      record : this.record || function(){
        return this.current_time;
        /*
        switch(this.record_area.tagName){
          case 'TEXTAREA':
            this.record_area.value += this.show_area.value + '\r\n';
            break;
          default:
            this.record_area.innerHTML += this.show_area.value + "<br>";
            break;
        }
        */
      }
    }
  </script>                                                             
  <body>
    <input  id="show_area"  type="text" />
    <button id="start_btn"  onClick="my_timer.begin();this.value = (this.value == 'start') ? 'pause' : 'start';">start</button>
    <button id="init_btn"   onClick="my_timer.init();document.getElementById('start_btn').value = 'start';">init</button>
    <button id="record_btn" onClick="my_timer.record();">record</button>
    <br>
    <textarea id="record_area" rows="20"></textarea>
  </body>
  <script type="text/javascript">
  var my_show = function(current_time){
var show_area = document.getElementById('show_area');
switch(show_area.tagName){
case 'TEXTAREA':
case 'INPUT':
show_area.value     = current_time;
break;
default:
show_area.innerHTML = current_time;
break;
}
}

  var my_record = function(current_time){
var show_area   = document.getElementById('show_area');
var record_area = document.getElementById('show_area');
switch(record_area.tagName){
case 'TEXTAREA':
case 'INPUT':
record_area.value     += show_area.value + '\r\n';
break;
default:
record_area.innerHTML += show_area.value + "<br>";
break;
}
}
  
    var my_timer    = timer;
    my_timer.id     = 'my_timer';
    my_timer.show   = my_show;
    my_timer.record = my_record;
    my_timer.init();
    
    
    //my_timer.show_area   = document.getElementById('show_area');
    //my_timer.record_area = document.getElementById('record_area');
  </script>
</html>