How fast do you double click?

by steveukx

CSS

div {
    font: 12pt/2 "Lucida Sans Unicode" "Ludica Sans";
    background: #e9f0f0;
    color: #333;
    text-align: center;
    padding: 0.5rem;
    position: absolute;
    top: -webkit-calc(50% - 1rem - 1em);
    left: -webkit-calc(50% - 50px);
    width: 100px;
    box-sizing: border-box;
    -webkit-user-select: none;
}
div:hover {
    background: #e0eaea;
    cursor: pointer;
}
div:after {
    content: "---";
    display: block;
}
div[data-time]:after {
    content: attr(data-time) "ms";
}

JavaScript

var lastClick = 0;

var clicker = jQuery('<div>[click me]</div>')
                .appendTo('body')
                .on('click', function(e) {
                    if(!lastClick) {
                        lastClick = Date.now();
                        clicker.removeAttr('data-time');
                    }
                    else {
                        var delta = Date.now() - lastClick;
                        lastClick = 0;
                        
                        clicker.attr('data-time', delta);
                    }
                });