clickcounter

by nama

HTML

<div id="timer">
  <span id="sec">0</span>.<span id="msec">0</span>秒
</div>
<div id="clickCounter">
  ここを連続クリック！
  <br>3秒で何回できるかな？
</div>
<div>
  <p>
    <span id="count"></span>回
  </p>
  <p id="msg">

  </p>
</div>
<div>
  <button id="reset">
    リセット
  </button>
</div>

CSS

#clickCounter {
  width: 200px;
  height: 100px;
  border: 2px solid #5b5b5b;
  color: #888888;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

button {
  width: 100px;
  height: 30px;
}
#msg{
  height: 20px;
}

JavaScript

var count = 0,
  sec = 0,
  msec = 0,
  start = false,
  end = false,
  timer,
  charengeSec = 3;

function activateTimer() {
  timer = setInterval(function() {
    msec += 20;
    if (msec == 1000) {
      msec = 0;
      sec++;
      $('#sec').text(sec);
      if (sec == charengeSec) {
        clearInterval(timer);
        end = true;
        $('#reset').removeAttr('disabled');
      }
    }
    $('#msec').text(msec);
  }, 20);
}

$('#clickCounter').on('click', function() {
  if (end) return;
  if (!start) {
    start = true;
    $('#reset').attr('disabled', 'disabled');
    activateTimer()
  }
  count++;
  $('#count').text(count);
  var msg;
  if (count < 10) {
    msg = '頑張れ！';
  } else if (count < 20) {
    msg = 'なかなか良いぞ！';
  } else if (count < 30) {
    msg = 'いい感じ！';
  } else if (count < 40) {
    msg = '結構すごいな！';
  } else {
    msg = '素晴らしい！';
  }
  $('#msg').text(msg);

});
$('#reset').on('click', function() {
  count = 0;
  sec = 0;
  msec = 0;
  start = false;
  end = false;
  $('#count').text(count);
  $('#sec').text(sec);
  $('#msec').text(msec);
  $('#msg').text('');
});