Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM timeStamp Event Property
The HTML DOM timeStamp property returns the elapsed time in milliseconds since the document was loaded when an event was created or triggered. This property is particularly useful for measuring performance, timing user interactions, and creating time-based game mechanics.
The timeStamp property only works if the event system supports it for the particular event type. Most modern browsers support this property for common events like mouse events, keyboard events, and touch events.
Syntax
Following is the syntax for accessing the timeStamp property −
event.timeStamp
This returns a number representing the time in milliseconds when the event was created, relative to when the document was loaded.
How It Works
The timeStamp value starts counting from zero when the document begins loading. Each time an event occurs, the timeStamp property captures the exact moment it happened. This makes it valuable for:
Measuring reaction times in games or interactive applications
Calculating time differences between events
Performance monitoring and debugging
Creating time-sensitive user interfaces
Example − Mouse Movement Game
Following example demonstrates the timeStamp property in an interactive mouse game where players must navigate through a safe zone −
<!DOCTYPE html>
<html>
<head>
<title>timeStamp Event Property</title>
<style>
* {
padding: 2px;
margin: 5px;
}
form {
width: 70%;
margin: 0 auto;
text-align: center;
}
#outer {
width: 70%;
margin: 0 auto;
padding: 0;
text-align: center;
border: 1px solid black;
height: 105px;
background-color: #28a745;
}
input[type="button"] {
border-radius: 10px;
}
#upper {
border-bottom: 1px solid black;
height: 40px;
margin: 0 0 15px 0;
background-color: #DC3545;
}
#lower {
border-top: 1px solid black;
height: 40px;
margin: 15px 0 0 0;
background-color: #DC3545;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<form>
<fieldset>
<legend>timeStamp Event Demo</legend>
<div id="outer">
<div id="upper"><h2>Danger</h2></div>
<div id="lower"><h2>Danger</h2></div>
</div>
<input type="button" id="start" value="Start" onclick="gameStart()">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById('divDisplay');
var gameDisplay = document.getElementById('outer');
function playGame(event) {
var x = event.clientX;
var y = event.clientY;
if(y > 95 && y < 110){
divDisplay.textContent = 'Keep Going!';
if(x === 439){
divDisplay.textContent = 'Congrats! You Did it in ' + event.timeStamp + ' milliseconds';
gameDisplay.removeEventListener('mousemove', playGame);
}
}
else{
divDisplay.textContent = 'You moved to DANGER area. You loose!';
gameDisplay.removeEventListener('mousemove', playGame);
}
}
function gameStart(){
gameDisplay.addEventListener('mousemove', playGame);
}
</script>
</body>
</html>
The output shows an interactive game where the mouse must stay in the green safe zone. The timeStamp property records when events occur −
[Game interface with green safe zone and red danger zones] When mouse moves in safe zone: "Keep Going!" When reaching the end: "Congrats! You Did it in 15432.5 milliseconds" When entering danger zone: "You moved to DANGER area. You loose!"
Example − Simple Click Timer
Following example shows a simpler use of the timeStamp property to measure click timing −
<!DOCTYPE html>
<html>
<head>
<title>Click TimeStamp Demo</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Click Timer Test</h2>
<button id="testButton">Click Me!</button>
<p id="result">Click the button to see the timestamp.</p>
<script>
document.getElementById('testButton').addEventListener('click', function(event) {
var timestamp = event.timeStamp;
var seconds = (timestamp / 1000).toFixed(2);
document.getElementById('result').innerHTML =
'Event timestamp: ' + timestamp.toFixed(2) + ' milliseconds<br>' +
'Time since page load: ' + seconds + ' seconds';
});
</script>
</body>
</html>
When you click the button, it displays the exact timestamp and converts it to seconds −
Event timestamp: 5234.75 milliseconds Time since page load: 5.23 seconds
Example − Reaction Time Measurement
Following example uses timeStamp to create a reaction time test −
<!DOCTYPE html>
<html>
<head>
<title>Reaction Time Test</title>
</head>
<body style="font-family: Arial, sans-serif; text-align: center; padding: 20px;">
<h2>Reaction Time Test</h2>
<button id="startBtn" onclick="startTest()">Start Test</button>
<div id="gameArea" style="width: 300px; height: 200px; margin: 20px auto; border: 2px solid #ccc; display: none; background: lightgray;">
<p style="margin-top: 80px;">Wait for GREEN...</p>
</div>
<p id="resultArea"></p>
<script>
var startTime = 0;
var gameArea = document.getElementById('gameArea');
var resultArea = document.getElementById('resultArea');
function startTest() {
document.getElementById('startBtn').style.display = 'none';
gameArea.style.display = 'block';
gameArea.style.background = 'lightgray';
gameArea.innerHTML = '<p style="margin-top: 80px;">Wait for GREEN...</p>';
var delay = Math.random() * 3000 + 1000; // 1-4 seconds
setTimeout(function() {
gameArea.style.background = 'lightgreen';
gameArea.innerHTML = '<p style="margin-top: 80px;">CLICK NOW!</p>';
startTime = performance.now();
}, delay);
}
gameArea.addEventListener('click', function(event) {
if (gameArea.style.background === 'lightgreen') {
var reactionTime = event.timeStamp - startTime;
resultArea.innerHTML = 'Your reaction time: ' + reactionTime.toFixed(2) + ' milliseconds';
gameArea.style.display = 'none';
document.getElementById('startBtn').style.display = 'inline';
}
});
</script>
</body>
</html>
This creates a reaction time game where users must click as soon as the background turns green. The timeStamp property measures the precise reaction time.
Browser Compatibility
The timeStamp property is widely supported across modern browsers. However, the precision and starting reference point may vary slightly between browsers. Most browsers now use high-resolution timestamps that provide sub-millisecond precision.
Key Points
The timeStamp starts counting from when the document begins loading
Values are returned in milliseconds with decimal precision
Not all event types support the timeStamp property
Useful for performance measurement and time-based interactions
Modern browsers provide high-resolution timestamps for accurate timing
Conclusion
The HTML DOM timeStamp property provides precise timing information for events, making it invaluable for creating interactive applications, measuring user response times, and performance monitoring. It works seamlessly with mouse, keyboard, and touch events in modern browsers.
300 Views
