w3resource
jquery exercises

jQuery: Time between the two click events on a paragraph

jQuery Events : Exercise-14 with Solution

Count the number of milliseconds between the two click events on a paragraph.

Sample Data :

<body>
<h1>Heading1</h1>
<h2>Heading2</h2>  
<p>Paragraph</p>
<button>Button</button>
<div id="log"></div>  
</body>
 

Solution:

HTML Code :

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
 <meta charset="utf-8">
 <title>Count the number of milliseconds between the two click events on a paragraph</title>
 </head>
 <body>
 <p>Count the number of milliseconds between the two click events on a paragraph </p>
   <div>Click on the above paragraph</div>
   </body>
   </html>
 

JavaScript Code :

var lastt, tdiff;
$( "p" ).click(function( event ) {
if (lastt) { tdiff = event.timeStamp - lastt; $( "div" ).append( "Time since last event: " + tdiff + "<br>" ); } else { $( "div" ).append( "<br>Click again.<br>" ); } lastt = event.timeStamp; });

Live Demo:

See the Pen jquery-events-exercise-14 by w3resource (@w3resource) on CodePen.


Contribute your code and comments through Disqus.

Previous: Display the tag's name on click.
Next: Display the event type on clicking all h1 elements.

What is the difficulty level of this exercise?



New Content: Composer: Dependency manager for PHP, R Programming