Ex No: 6 COUNT TIME BETWEEN CLICK
Aim: To write a JQuery code to count time between two click events.
Algorithm
Step1: Create a folder “Ex6” to place the HTML files.
Step2: Create HTML file “index.html”.
Step3: Create a folder “script” and place “jquery-3.5.1.min.js” file in it.
Step4: Add JQuery code to count time between two click events.
Source Code

index.html


<!DOCTYPE html>
<html>
 <head>
  <title>Time between Click Events</title> 
 <style>
   header {
    text-align:center;
    height: 100px;
    background-color: olive;
    padding: 10px;
    border-radius: 10px 10px 0px 0px;
   }
   footer {
    text-align:center;
    font-size: 12px;
    height: 50px;
    line-height: 50px;
    background-color: olive;
    padding: 10px;
    border-radius: 10px;
   }
   article{
    width: auto;
    padding: 10px;
    margin:5px;
    overflow-x: auto;
   }
 </style>
 <script src="script/jquery-3.5.1.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){  
  var starttime, timediff;
  
  $("p").click(function(e) {
   if(starttime)
   {
    timediff = e.timeStamp - starttime;
    $("div").append("<br>Time Difference: "+timediff);
    starttime = 0;
   }
   else
   {
    $("div").html("<b>Click Paragraph Again</b>");
    starttime = e.timeStamp;
   } 
  });//End of Click Event

 });//End of Document Ready Function
 
 </script>
 </head>
 <body>  
  <header>
   <h1>Time between Click Events</h1>
  </header> 
  <hr>
  <article>
    <p>Click this Paragrap to count time in milliseconds between two Click Events</p>
    <div></div>
  </article>
  <footer>
   Developed by K Anbarasan
  </footer>
 </body>
</html>
Result: Thus JQuery code is written to count time between two click events.