<html>
<body onmousedown="mouseClick();" oncontextmenu="return false;">
  <div id="click" class="click"></div>
  Clicks:  <input id="count" type="text" value="0" size="4"> <button id="reset">reset</button><br />
  Fast double click count:  <input id="dcCount" type="text" value="0" size="4"> <br />
  <textarea id="textarea"></textarea>
  
  
</body>
</html>
textarea {
  width:500px;
  height:400px;
}
.click {
  width:100%;
  height:200px;
  background:orange;
  text-align:center;
  color:#fff;
  cursor:pointer;
  font-size:20px;
}
var click = document.getElementById('click');
var textarea = document.getElementById('textarea');
var clicks = document.getElementById('count');
var dcCount = document.getElementById('dcCount');
var reset = document.getElementById('reset');
reset.onclick = function() {
  clicks.value = 0;
  dcCount.value = 0;
  textarea.value = '';
  click.style.background = 'orange';
}

var prevClickMicrotime = microtime(true);
function microtime(get_as_float) {
  //  discuss at: http://phpjs.org/functions/microtime/
  // original by: Paulo Freitas
  //   example 1: timeStamp = microtime(true);
  //   example 1: timeStamp > 1000000000 && timeStamp < 2000000000
  //   returns 1: true

  var now = new Date()
    .getTime() / 1000;
  var s = parseInt(now, 10);

  return (get_as_float) ? now : (Math.round((now - s) * 1000) / 1000) + ' ' + s;
}

var prevClickMicrotime = microtime(true);

function clickEvent() {
	clickTime = microtime(true);
  diff = clickTime - prevClickMicrotime;
  if(diff <= 0.08) {
    click.style.background = 'red';
    dcCount.value++;
  }
  textarea.value = diff + "\n" + textarea.value;
  prevClickMicrotime = clickTime;
  clicks.value++;  
}

function mouseClick() {
    var e = window.event;
  	console.log(e);
  	clickEvent();
    return false;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.