JS How to subtract time (incl. milliseconds) like a Timer

Question

I'm new here and I'm trying to write some code for myself.

I do have my own "clock" in this code. Then I specify an exact time.

Then I want to subtract from the exact time I specified before the actual time (like a timer or countdown) with ms.

But I really don't know how.

This is my code so far:

<!DOCTYPE html>
<html>
<head>
<title>DSTimer</title>
</head>
<body>
<center><font face="Verdana" size="40">DS-Timer</font><br /></center>
<br />
<br />
<font size="+7" </font>
<p id="DS-Timer">getElementById</p>
<font size="-1" </font>
<p id="ABC"></p>
<font size="+1" </font>
    <label class="h2" for="delay">Verbindungszeit zum Server</label>
    <input type="number" name="Verbindungszeit zum Server" id="delay" maxlength="3">
    <button onclick="addDelay()" type="submit">OK</button>    

<p> <label for="Abschickzeitpunkt">Abschickzeitpunkt</label>
    <input type="time" step="0.001" id="ABZ">
    <button onclick="insert()" type="submit">OK</button></p>        

    <button type="reset">Eingaben zurücksetzen</button>

</form>
</body>
<script>
var delay = 0;
timer();
function timer() {
    var now = new Date();

    var test = new Date(now.getTime() + delay),
        h = test.getHours(),
        m = test.getMinutes(),
        s = test.getSeconds(),
        ms = test.getMilliseconds();

    m = zeroFill(m);
    s = zeroFill(s);
    ms = zeroFill(ms);
    document.getElementById('DS-Timer').innerHTML = h + ':' + m + ':' + s + ':' + ms;
    setTimeout(timer, 5);
}
function zeroFill(filler) {
    filler = (filler < 10 ? '0' : '') + filler;
    return filler;
}
function addDelay() {
    var d = document.getElementById('delay').value;
    delay = parseFloat(d);
}
function insert() {
    var x = document.getElementById("ABZ").value
    document.getElementById("ABC").innerHTML = x;  
}    
</script>
</html>```

So I want to calculate "DS-Timer - ABC".

You don't have an `DS-Timer` & `delay` element in your HTML you posted, is this intentional? — A1rPun, Nov 21 '19 at 20:39
Possible duplicate of [Find elapsed time in javascript](https://stackoverflow.com/questions/31405996/find-elapsed-time-in-javascript) — Heretic Monkey, Nov 21 '19 at 21:07

score 1 · Answer 1 · answered Nov 21 '19 at 21:04

You can use the Performance interface in most modern Javascript engines.

let start = performance.now();
let timer = document.getElementById("timer");
for(let i = 0;i<5000;i++){
  timer.innerText = i;
}
let end = performance.now();
let elapsed = end - start;
timer.innerText += " that took "+elapsed+" ms"

<h1 id="timer"></h1>

Read more about it here: Performance Interface

score 0 · Answer 2 · answered Nov 24 '19 at 19:28

This is how it worked. :-)

var z = (document.getElementById("ABZ").value).split(':').join(',').split('.').join(',').split(',').join(',').split(',');
var y = new Date();
var generatedDate = new Date(y.getFullYear(), y.getMonth(),y.getDate(),z[0], z[1], z[2], z[3], z[4], z[5]);
var calculatedDate = generatedDate - y;
var h = Math.floor((calculatedDate % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var m = Math.floor((calculatedDate % (1000 * 60 * 60)) / (1000 * 60));
var s = Math.floor((calculatedDate % (1000 * 60)) / 1000);
var ms = Math.floor((calculatedDate % 1000));
document.getElementById("COUNTDOWN").innerHTML = ( h + ':' + m + ':' + s + ':' + ms);```

JS How to subtract time (incl. milliseconds) like a Timer

2 Answers2