Tastenanschlag Zeit messen
- Ersteller Fraagi3
- Erstellt am
Folge dem Video um zu sehen, wie unsere Website als Web-App auf dem Startbildschirm installiert werden kann.
Anmerkung: Diese Funktion ist in einigen Browsern möglicherweise nicht verfügbar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
textarea {
width: 100%;
min-height: 10rem;
font-family: Fira Code, monospace;
}
#log {
min-height: 40rem;
}
</style>
</head>
<body>
<h1>Eingabe</h1>
<textarea id="input" tabindex="0"></textarea>
<h1>Log</h1>
<textarea readonly id="log"></textarea>
<script>
let buffer = [];
let input = document.querySelector("#input");
let log = document.querySelector("#log");
const getInfo = function( e, type )
{
return {
when: window.performance.now(),
key: e.key,
keyCode: e.keyCode
};
}
input.addEventListener("keydown",function( e )
{
let down = getInfo( e, "down" );
buffer[down.keyCode] = down;
});
input.addEventListener("keyup",function(e)
{
let up = getInfo( e, "up" );
let down = buffer[event.keyCode];
delete buffer[event.keyCode];
diff = up.when - down.when;
log.innerHTML = "'" + down.key + "'" + " down to " + "'" + up.key + "'" + " up diff: " + diff + "ms \n" + log.innerHTML;
});
</script>
</body>
</html>
't' down to 't' up diff: 101ms
's' down to 's' up diff: 130ms
'e' down to 'e' up diff: 158ms
'T' down to 't' up diff: 120ms
'Shift' down to 'Shift' up diff: 107ms
' ' down to ' ' up diff: 95ms
'n' down to 'n' up diff: 95ms
'i' down to 'i' up diff: 109ms
'e' down to 'e' up diff: 108ms
' ' down to ' ' up diff: 134ms
't' down to 't' up diff: 110ms
's' down to 's' up diff: 127ms
'i' down to 'i' up diff: 102ms
' ' down to ' ' up diff: 123ms
's' down to 's' up diff: 169ms
'a' down to 'a' up diff: 155ms
'D' down to 'd' up diff: 131ms
'Shift' down to 'Shift' up diff: 236ms
privacy.reduceTimerPrecision
wechseln. Der Log ist mit dem Wert auf true
erstellt.It’s not a coincidence that the quickest keyboard measured also has the shortest key travel distance by a large margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
textarea {
width: 100%;
min-height: 10rem;
font-family: Fira Code, monospace;
}
#log {
min-height: 40rem;
}
</style>
</head>
<body>
<h1>Eingabe</h1>
<textarea id="input" tabindex="0"></textarea>
<h1>Log</h1>
<textarea readonly id="log"></textarea>
<script>
let buffer = [];
let input = document.querySelector("#input");
let log = document.querySelector("#log");
const getInfo = function( e )
{
return {
when: window.performance.now(),
key: e.key,
keyCode: e.keyCode
};
}
input.addEventListener("keydown",function( e )
{
let down = getInfo( e );
if( !buffer[down.keyCode] )
{
buffer[down.keyCode] = down;
}
});
input.addEventListener("keyup",function(e)
{
let up = getInfo( e );
let down = buffer[event.keyCode];
delete buffer[event.keyCode];
diff = up.when - down.when;
log.innerHTML = "'" + down.key + "'" + " down to " + "'" + up.key + "'" + " up diff: " + diff + "ms \n" + log.innerHTML;
});
</script>
</body>
</html>
'd' down to 'd' up diff: 1626ms
't' down to 't' up diff: 101ms
's' down to 's' up diff: 112ms
'e' down to 'e' up diff: 160ms
'T' down to 't' up diff: 109ms
'Shift' down to 'Shift' up diff: 92ms
' ' down to ' ' up diff: 104ms
'n' down to 'n' up diff: 101ms
'i' down to 'i' up diff: 102ms
'e' down to 'e' up diff: 108ms
' ' down to ' ' up diff: 118ms
't' down to 't' up diff: 105ms
's' down to 's' up diff: 126ms
'i' down to 'i' up diff: 98ms
' ' down to ' ' up diff: 112ms
's' down to 's' up diff: 136ms
'a' down to 'a' up diff: 140ms
'D' down to 'd' up diff: 106ms
'Shift' down to 'Shift' up diff: 146ms