Hur mäter man förfluten tid i Javascript?

UPPDATERING 2024:

performance.now() är det rekommenderade moderna tillvägagångssättet. https://stackoverflow.com/a/15641427/7414387

Jag skapade ett enkelt spel som startar och slutar timern när användaren slutar klicka på 16 rutor.

Jag vill mäta den gångna tiden för användaren att slutföra spelet. Hur gör jag det med Javascript?

Jag tittade på olika svar som detta, men jag hade svårt att förstå andras kod.

Jag skulle anta att det ser ut så här.

Timer Start: When user clicks the first box
Timer End: When user clicks the last box

Svar #1

Datumdokumentationen anger att:

JavaScript-datumet baseras på ett tidsvärde som är millisekunder sedan midnatt den 1 januari 1970, UTC

Klicka på startknappen och sedan på stoppknappen. Det kommer att visa dig antalet sekunder mellan de två klickningarna.

Millisekundsskillnaden finns i variabeln timeDiff. Lek med den för att hitta sekunder/minuter/timmar eller vad du behöver

var startTime, endTime;

function start() {
  startTime = new Date();
};

function end() {
  endTime = new Date();
  var timeDiff = endTime - startTime; //in ms
  // strip the ms
  timeDiff /= 1000;

  // get seconds 
  var seconds = Math.round(timeDiff);
  console.log(seconds + " seconds");
}
<button onclick="start()">Start</button>

<button onclick="end()">End</button>

ELLER ett annat sätt att göra det för moderna webbläsare

Att använda performance.now() som returnerar ett värde som representerar tiden som har förflutit sedan tidsursprunget. Detta värde är ett flyttal med mikrosekunder i decimaldelen.

Tidsursprunget är en standardtid som anses vara början på det aktuella dokumentets livslängd.

var startTime, endTime;

function start() {
  startTime = performance.now();
};

function end() {
  endTime = performance.now();
  var timeDiff = endTime - startTime; //in ms 
  // strip the ms 
  timeDiff /= 1000; 
  
  // get seconds 
  var seconds = Math.round(timeDiff);
  console.log(seconds + " seconds");
}
<button onclick="start()">Start</button>
<button onclick="end()">End</button>

Relaterade artiklar