javascriptとjqueryで簡単なストップウォッチを作成しました

2018年12月3日

javascriptとjqueryで簡単なストップウォッチを作成しました。

<div id="stoptimer"></div>
<script src="./jquery.min.js"></script>
<script>
var StopTimer = function () {
  var elapsed = 0, start_time  = 0, hour = 0, min = 0, sec = 0, flag_stopped = true;
  var elem_id = $('#stoptimer');
  
  var div_timer = $('<div></div>'),
      elem_hour = $('<span></span>', {text: '00', addClass: 'stoptimer_hour'}),
      elem_min  = $('<span></span>', {text: '00', addClass: 'stoptimer_min'}),
      elem_sec  = $('<span></span>', {text: '00', addClass: 'stoptimer_sec'});
  div_timer
    .append(elem_hour)
    .append('<span>:</span>')
    .append(elem_min)
    .append('<span>:</span>')
    .append(elem_sec);
  elem_id.append(div_timer);
  
  var div_btn = $('<div></div>'),
      btn_start = $('<button></button>', {
        text: "START",
        addClass: "stoptimer_btn_start",
        click: function(){
          changeFlagStopped(false);
          elapsedTime();
        }
      }),
      btn_stop = $('<button></button>', {
        text: "STOP",
        addClass: "stoptimer_btn_stop",
        click: function(){
          changeFlagStopped(true);
        }
      }),
      btn_reset = $('<button></button>', {
        text: "RESET",
        addClass: "stoptimer_btn_reset",
        click: function(){
          setElapsedTime(0);
          changeFlagStopped(true);
        }
      });
  div_btn
    .append(btn_start)
    .append(btn_stop)
    .append(btn_reset);
  elem_id.append(div_btn);
  
  var toggleBtn = function () {
    if (flag_stopped) {
      btn_start.attr('disabled', false);
      btn_stop.attr('disabled', true);
      btn_reset.attr('disabled', false);
    } else {
      btn_start.attr('disabled', true);
      btn_stop.attr('disabled', false);
      btn_reset.attr('disabled', true);
    }
  };
  toggleBtn();
  
  var changeFlagStopped = function (flg) {
    flag_stopped = flg;
    toggleBtn();
  };
  var writeTime = function () {
    hour = (elapsed >= 3600) ? Math.floor(elapsed / 3600) : 0;
    min  = (elapsed >= 60) ? Math.floor((elapsed % 3600) / 60) : 0;
    sec  = Math.floor(elapsed % 60);
    if(hour < 10) hour = "0" + hour;
    if(min < 10) min = "0" + min;
    if(sec < 10) sec = "0" + sec;
    
    elem_hour.text(hour);
    elem_min.text(min);
    elem_sec.text(sec);
  };
  var elapsedTime = function () {
    if (flag_stopped) return;
    writeTime();
    elapsed++;
    setTimeout(elapsedTime, 1000);
  };
  var setElapsedTime = function (t) {
    elapsed = t;
    writeTime();
  };
  return {};
}

$(function() {
  var timer = StopTimer();
});
</script>

• Tweet