คุณสมบัติ timeStamp ของ HTML DOM Event

คุณสมบัติ timeStamp ของ HTML DOM ส่งคืน เวลาที่ผ่านไป (elapsed time) ในหน่วยมิลลิวินาที นับจากเวลาที่เหตุการณ์ (event) ถูกสร้างหรือกระตุ้น

หมายเหตุ: timeStamp ทำงานได้ก็ต่อเมื่อระบบเหตุการณ์ (event system) รองรับสำหรับเหตุการณ์นั้นๆ

ไวยากรณ์ (Syntax)

event.timeStamp

ตัวอย่างการใช้งาน

ตัวอย่างเกมเลื่อนเมาส์: เริ่มเกมแล้วเลื่อนเมาส์อยู่ในพื้นที่สีเขียว (ปลอดภัย) หากเลื่อนถึงจุดสิ้นสุดพื้นที่สีเขียว (x === 439) จะแสดงเวลาที่ใช้ในการเลื่อน (timeStamp) หากเลื่อนเข้าพื้นที่สีแดง (อันตราย) จะแพ้

<!DOCTYPE html>
<html>
<head>
<title>timeStamp Event</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>
  <form>
    <fieldset>
      <legend>timeStamp-Event</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>

ผลลัพธ์ (Output)

หลังกด "Start" และเลื่อนเมาส์อยู่ในพื้นที่สีเขียว (ปลอดภัย):

หลังกด "Start" และเลื่อนเมาส์ถึงจุดสิ้นสุดพื้นที่สีเขียว:

หลังกด "Start" และเลื่อนเมาส์เข้าพื้นที่สีแดง (อันตราย):