(c) 2015

by PhilQ

HTML

<button onclick="newTime();">New time</button>
<div id="targTime"></div>
<button id="btn" onclick="tm();">Click</button>
<div id="currentDiff"></div>
<div id="highscoreDiff"></div>

CSS

* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

button {
    float: left;
    position: relative;
    display: block;
    width: 100%;
    font-size: 20px;
    padding: 15px 0px;
}
button:first-child {
    width: 50%;
}

div {
    float: left;
    position: relative;
    display: block;
}
#targTime, #currentDiff, #highscoreDiff {
    width: 50%;
    font-size: 30px;
}

JavaScript

var s = new Date();
var highscore = 100000;

var dE = 5000;
var dS = 200;
var targetNR = 0;

var sw = 0;

function newTime() {
    targetNR = Math.round((Math.random() * (dE-dS)) + dS);
    $("#targTime").html(targetNR);
    $("#currentDiff").html("...");
    $("#btn").text("Start");
    sw = 0;
}

function tm() {
    var s2 = Math.round((new Date()).getTime());
    var diff = Math.round(s2 - s);
    s = s2;
    if (sw == 1) {
        var diffToTarget = (targetNR - diff);
        var absDiff = Math.abs(diffToTarget);
        highscore = (absDiff<highscore)? absDiff: highscore;
        
        var cls = (diffToTarget<0)? "red": "green";
        var curPerc = Math.round((diffToTarget/targetNR)*100);
        $("#currentDiff").html(curPerc + "%").css("color", cls);
        
        var highPerc = Math.round((highscore/targetNR)*100);
        $("#highscoreDiff").html(highPerc + "%");
        $("#btn").text("Start");
        sw = 0;
    } else {
        sw = 1;
        $("#currentDiff").html("...");
        $("#btn").text("Stop");
    }
}

$(document).ready(function(){
    $(window).keypress(function(e) {
      if (e.keyCode == 0 || e.keyCode == 32) {
        tm();
      }
    });
});