{"id":3906,"date":"2016-01-13T07:33:03","date_gmt":"2016-01-13T07:33:03","guid":{"rendered":"http:\/\/www.hostingnotes.com\/?p=3906"},"modified":"2017-10-07T14:19:36","modified_gmt":"2017-10-07T14:19:36","slug":"finding-date-and-time-a-simple-clock-in-javascript","status":"publish","type":"post","link":"https:\/\/www.webdevelopersnotes.com\/finding-date-and-time-a-simple-clock-in-javascript","title":{"rendered":"Finding date and time &#8211; A simple clock in JavaScript"},"content":{"rendered":"<p>It is easy to find the time and date on the visitor&#8217;s computer (client side) using the JavaScript <span class=\"codeword\">Date<\/span> object with its various methods. Let&#8217;s construct a simple function that finds the time (hours:minutes:seconds) and prints it in the document.<\/p>\n<pre>\r\n&lt;script type=\"text\/javascript\"&gt;\r\n&lt;!--\r\nfunction det_time()\r\n   {\r\n   var d = new Date();\r\n   var c_hour = d.getHours();\r\n   var c_min = d.getMinutes();\r\n   var c_sec = d.getSeconds();\r\n   var t = c_hour + \":\" + c_min + \":\" + c_sec;\r\n   return t;\r\n   }\r\n\/\/--&gt;\r\n&lt;\/script&gt;\r\n<\/pre>\n<p>When we call this function it prints the time as follows:<\/p>\n<p><script type=\"text\/javascript\"><![CDATA[\n<!--\ndocument.write(det_time());\n\/\/-->\n]]><\/script><\/p>\n<p>In order to keep the clock ticking, as it were, we would have to call <span class=\"codeword\">det_time()<\/span> function again and again. JavaScript provides an method called <span class=\"codeword\"><strong>setInterval()<\/strong><\/span> that takes two arguments; the first is the function that has to be called repeatedly and the second, the time interval (in milliseconds). In our case, the clock has to be called every second (1000 milliseconds).<\/p>\n<pre>\r\nsetInterval(\"det_time()\", 1000);\r\n<\/pre>\n<p>Lastly, for correct execution, its best to put this clock inside a text field.<\/p>\n<p><a href=\"\/\/www.webdevelopersnotes.com\/tips\/html\/finding-date-and-time-a-simple-clock-in-javascript.html\" target=\"_blank\">Click here to see how this works!<\/a><\/p>\n<p>Here is the complete code:<\/p>\n<pre>\r\n<strong>\/\/This function is placed in the HTML head section<\/strong>\r\nfunction det_time()\r\n   {\r\n   var d = new Date();\r\n   var c_hour = d.getHours();\r\n   var c_min = d.getMinutes();\r\n   var c_sec = d.getSeconds();\r\n   var t = c_hour + \":\" + c_min + \":\" + c_sec;\r\n   document.myform.my_time.value = t;\r\n   }\r\n\r\n\r\n<strong>\/\/The following code is placed in the HTML body...<\/strong>\r\n&lt;form name=\"myform\"&gt;\r\n&lt;input type=\"text\" size=\"10\" maxlength=\"10\" value=\"\" \r\nname=\"my_time\"&gt;\r\n&lt;\/form&gt;\r\n&lt;script type=\"text\/javascript\"&gt;\r\n&lt;!--\r\n\r\nsetInterval(\"det_time()\", 1000);\r\n\r\n\/\/--&gt;\r\n&lt;\/script&gt;\r\n\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"It is easy to find the time and date on the visitor&#8217;s computer (client side) using the JavaScript Date object with its various methods. Let&#8217;s construct a simple function that finds the time (hours:minutes:seconds) and prints it in the document. &lt;script type=&#8221;text\/javascript&#8221;&gt; &lt;!&#8211; function det_time() { var d = new Date(); var c_hour = d.getHours(); [&hellip;]","protected":false},"author":1,"featured_media":14657,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[56],"tags":[],"class_list":["post-3906","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/posts\/3906","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/comments?post=3906"}],"version-history":[{"count":0,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/posts\/3906\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/media\/14657"}],"wp:attachment":[{"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/media?parent=3906"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/categories?post=3906"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/tags?post=3906"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}