{"id":3371,"date":"2017-04-13T07:44:51","date_gmt":"2017-04-13T07:44:51","guid":{"rendered":"http:\/\/www.jquery-az.com\/?p=3371"},"modified":"2023-10-22T10:35:52","modified_gmt":"2023-10-22T10:35:52","slug":"2-demos-of-jquery-stopwatchtimer-plug-in-for-any-html-element","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/2-demos-of-jquery-stopwatchtimer-plug-in-for-any-html-element\/","title":{"rendered":"2 Demos of jQuery Stopwatch\/Timer Plug-in for any HTML element"},"content":{"rendered":"

jQuery timer plug-in<\/strong><\/h3>\n

The timer.jquery<\/strong> plug-in is a simple solution for adding a timer or stopwatch inside any HTML element. The minified version is the only 7K size that you need to include before the body closing tag.<\/p>\n

The timer is customizable by using the options provided for the plug-in while a user may start, pause, and resume the timer at any time. Multiple timers can be added in a single page.<\/p>\n

Developer\u2019s page<\/a> Download plug-in<\/a><\/strong><\/h6>\n

Installing the timer plug-in<\/strong><\/h3>\n

You may install the plug-in by bower:<\/p>\n

bower install timer.jquery<\/p><\/blockquote>\n

The plug-in can also be referred directly from the CDN:<\/p>\n

https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/timer.jquery\/0.6.5\/timer.jquery.min.js<\/p><\/blockquote>\n

Alternatively, download the plug-in from the GitHub website by the above-provided link and include the JS file before the jQuery file:<\/p>\n

<script src=’js\/timer.jquery\/timer.jquery.js’><\/script><\/p><\/blockquote>\n

Adjust the path as per your directory structure.<\/p>\n

The markup:<\/strong><\/p>\n

Use an input type text and refer its class in the jQuery code, for example:<\/p>\n

<input type='text' name='timer' class='form-control timer-demo' placeholder='0 sec' \/><\/pre>\n
You may also use it in other HTML elements.<\/p>\n
See the demo below along with jQuery code and complete markup.<\/p>\n
A demo of timer plug-in<\/strong><\/h3>\n
After opening the demo page by clicking the link or image below, press the \u201cStart\u201d button. The timer will start in the textbox and you can see buttons to Pause or Remove the timer as well:<\/p>\n
\"jQuery<\/p>\n
Online demo and code<\/strong><\/a><\/h6>\n
The markup:<\/strong><\/p>\n
<div class='row'>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div class='col-md-3'>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <input type='text' name='timer' class='form-control timer-demo' placeholder='0 sec' \/>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/div>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div class='col-md-9'>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <button class='btn btn-primary btn-lg start-timer-btn'>Start<\/button>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <button class='btn btn-primary btn-lg resume-timer-btn hidden'>Resume<\/button>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <button class='btn pause-timer-btn hidden'>Pause<\/button>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <button class='btn btn-danger remove-timer-btn hidden'>Remove Timer<\/button>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/div>\r\n\r\n<\/div><\/pre>\n
Get the complete code from the demo page.<\/p>\n
An example of executing a function after a certain duration<\/strong><\/h3>\n
After a certain duration, you may execute a function. For that, you may use the duration option to specify the interval. After that, the specified action can be performed by using the callback function.<\/p>\n
In the example, an alert will display after five seconds as you click the button:<\/p>\n
\"jQuery<\/p>\n
<\/h6>\n
The script:<\/strong><\/p>\n
<script>\r\n\r\n\u00a0\u00a0 (function(){\r\n\r\n  \u00a0 var hasTimer = false;\r\n\r\n\u00a0\u00a0\u00a0\u00a0 $('.start-timer-btn').on('click', function() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 hasTimer = true;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $('.timer-demo').timer({\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 duration: '5s',\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 callback: function() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 alert('Stop, Your time is up!');\r\n\u00a0 \u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0 });\r\n\u00a0 });\r\n})();\r\n\r\n<\/script><\/pre>\n
For more about this plug-in, visit the developer\u2019s page.<\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
jQuery timer plug-in The timer.jquery plug-in is a simple solution for adding a timer or stopwatch inside any HTML element. The minified version is the only 7K size that you need to include before the body closing tag. The timer is customizable by using the options provided for the plug-in while a user may start, … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":3372,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[35],"yoast_head":"\n2 Demos of jQuery Stopwatch\/Timer Plug-in for any HTML element<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.jquery-az.com\/2-demos-of-jquery-stopwatchtimer-plug-in-for-any-html-element\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"2 Demos of jQuery Stopwatch\/Timer Plug-in for any HTML element\" \/>\n<meta property=\"og:description\" content=\"jQuery timer plug-in The timer.jquery plug-in is a simple solution for adding a timer or stopwatch inside any HTML element. The minified version is the only 7K size that you need to include before the body closing tag. The timer is customizable by using the options provided for the plug-in while a user may start, ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jquery-az.com\/2-demos-of-jquery-stopwatchtimer-plug-in-for-any-html-element\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-04-13T07:44:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-22T10:35:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2017\/04\/135.0_1-jQuery-timer.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"505\" \/>\n\t<meta property=\"og:image:height\" content=\"98\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"jqueryaz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"jqueryaz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jquery-az.com\/2-demos-of-jquery-stopwatchtimer-plug-in-for-any-html-element\/\",\"url\":\"https:\/\/www.jquery-az.com\/2-demos-of-jquery-stopwatchtimer-plug-in-for-any-html-element\/\",\"name\":\"2 Demos of jQuery Stopwatch\/Timer Plug-in for any HTML element\",\"isPartOf\":{\"@id\":\"https:\/\/www.jquery-az.com\/#website\"},\"datePublished\":\"2017-04-13T07:44:51+00:00\",\"dateModified\":\"2023-10-22T10:35:52+00:00\",\"author\":{\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jquery-az.com\/2-demos-of-jquery-stopwatchtimer-plug-in-for-any-html-element\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jquery-az.com\/2-demos-of-jquery-stopwatchtimer-plug-in-for-any-html-element\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jquery-az.com\/2-demos-of-jquery-stopwatchtimer-plug-in-for-any-html-element\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.jquery-az.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"2 Demos of jQuery Stopwatch\/Timer Plug-in for any HTML element\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jquery-az.com\/#website\",\"url\":\"https:\/\/www.jquery-az.com\/\",\"name\":\"\",\"description\":\"PHP, Bootstrap, jQuery, CSS, Python, Java and others\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jquery-az.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\",\"name\":\"jqueryaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"caption\":\"jqueryaz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"2 Demos of jQuery Stopwatch\/Timer Plug-in for any HTML element","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.jquery-az.com\/2-demos-of-jquery-stopwatchtimer-plug-in-for-any-html-element\/","og_locale":"en_US","og_type":"article","og_title":"2 Demos of jQuery Stopwatch\/Timer Plug-in for any HTML element","og_description":"jQuery timer plug-in The timer.jquery plug-in is a simple solution for adding a timer or stopwatch inside any HTML element. The minified version is the only 7K size that you need to include before the body closing tag. The timer is customizable by using the options provided for the plug-in while a user may start, ... Read more","og_url":"https:\/\/www.jquery-az.com\/2-demos-of-jquery-stopwatchtimer-plug-in-for-any-html-element\/","article_published_time":"2017-04-13T07:44:51+00:00","article_modified_time":"2023-10-22T10:35:52+00:00","og_image":[{"width":505,"height":98,"url":"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2017\/04\/135.0_1-jQuery-timer.jpg","type":"image\/jpeg"}],"author":"jqueryaz","twitter_misc":{"Written by":"jqueryaz","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jquery-az.com\/2-demos-of-jquery-stopwatchtimer-plug-in-for-any-html-element\/","url":"https:\/\/www.jquery-az.com\/2-demos-of-jquery-stopwatchtimer-plug-in-for-any-html-element\/","name":"2 Demos of jQuery Stopwatch\/Timer Plug-in for any HTML element","isPartOf":{"@id":"https:\/\/www.jquery-az.com\/#website"},"datePublished":"2017-04-13T07:44:51+00:00","dateModified":"2023-10-22T10:35:52+00:00","author":{"@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3"},"breadcrumb":{"@id":"https:\/\/www.jquery-az.com\/2-demos-of-jquery-stopwatchtimer-plug-in-for-any-html-element\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jquery-az.com\/2-demos-of-jquery-stopwatchtimer-plug-in-for-any-html-element\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.jquery-az.com\/2-demos-of-jquery-stopwatchtimer-plug-in-for-any-html-element\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.jquery-az.com\/"},{"@type":"ListItem","position":2,"name":"2 Demos of jQuery Stopwatch\/Timer Plug-in for any HTML element"}]},{"@type":"WebSite","@id":"https:\/\/www.jquery-az.com\/#website","url":"https:\/\/www.jquery-az.com\/","name":"","description":"PHP, Bootstrap, jQuery, CSS, Python, Java and others","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jquery-az.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3","name":"jqueryaz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","caption":"jqueryaz"}}]}},"_links":{"self":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/3371"}],"collection":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/comments?post=3371"}],"version-history":[{"count":4,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/3371\/revisions"}],"predecessor-version":[{"id":10916,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/3371\/revisions\/10916"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media\/3372"}],"wp:attachment":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media?parent=3371"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/categories?post=3371"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/tags?post=3371"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}