{"id":4918,"date":"2022-08-25T03:19:24","date_gmt":"2022-08-24T21:49:24","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-countdown-timer-for-hours-minutes-and-seconds\/"},"modified":"2022-08-25T03:19:24","modified_gmt":"2022-08-24T21:49:24","slug":"solved-countdown-timer-for-hours-minutes-and-seconds","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-countdown-timer-for-hours-minutes-and-seconds\/","title":{"rendered":"[Solved] Countdown timer for hours, minutes, and seconds"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

The problem is if you save the time in cookie just before refresh and retrieve it after page loads it may not match the real current time because page may take arbitrary amount of time to refresh, 1st time it may be 1 sec 2nd time may be faster and take 0.5 sec due to factors like caching etc. for users on slower network it may be always more than 1-2 seconds. So the time on the page will always lag and won’t match the real current time after a few refreshes.<\/strike><\/p>\n

Looks like i was wrong browser don’t refresh the content already on the page until all required resources are downloaded so your counter keeps going as well as setting cookies until its all ready<\/p>\n

Here is what i got to work<\/p>\n

<html>\n<body>\n<div id=\"hms\">02:00:00<\/div>\n<\/body>\n\n<script>\nvar startTime;\nfunction getCookie(name) {\n  var value = \"; \" + document.cookie;\n  var parts = value.split(\"; \" + name + \"=\");\n  if (parts.length == 2) return parts.pop().split(\";\").shift();\n} \/\/ credits kirlich @http:\/\/stackoverflow.com\/questions\/10730362\/get-cookie-by-name\n\nfunction count() {\n if(typeof getCookie('remaining')!= 'undefined')\n {\n   startTime = getCookie('remaining');\n }\n else if(document.getElementById('hms').innerHTML.trim()!='')\n {\n   startTime = document.getElementById('hms').innerHTML;\n }\n else\n {\n  var d = new Date(); \n  var h=d.getHours(); \n  var m=d.getMinutes();\n  var s=d.getSeconds();\n  startTime = h+':'+m+':'+s;\n  \/\/OR\n  startTime  = d.toTimeString().split(\" \")[0]\n }\n\n var pieces = startTime.split(\":\");\n var time = new Date();\n time.setHours(pieces[0]);\n time.setMinutes(pieces[1]);\n time.setSeconds(pieces[2]);\n var timediff = new Date(time.valueOf()-1000)\n var newtime = timediff.toTimeString().split(\" \")[0];\n document.getElementById('hms').innerHTML=newtime ;\n document.cookie = \"remaining=\"+newtime;\n setTimeout(count,1000);\n}\ncount();\n<\/script>\n\n<\/html>\n<\/code><\/pre>\n
PS:<\/strong> Tried and tested the countdown survives page refresh and accurate even in heavy page throttling >10 seconds!<\/p>\n
If you don’t want current time but any manual time entered you can always adjust the values to get the desired effect.<\/p>\n<\/p><\/div>\n
<\/div>\n<\/div>\n
            2<\/span> <\/p><\/div>\n<\/div>\n
[ad_2]<\/p>\n
solved Countdown timer for hours, minutes, and seconds <\/p>\n","protected":false},"excerpt":{"rendered":"
[ad_1] The problem is if you save the time in cookie just before refresh and retrieve it after page loads it may not match the real current time because page may take arbitrary amount of time to refresh, 1st time it may be 1 sec 2nd time may be faster and take 0.5 sec due … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[1151,333,1152],"class_list":["post-4918","post","type-post","status-publish","format-standard","hentry","category-solved","tag-cookies","tag-javascript","tag-timer"],"yoast_head":"\n[Solved] Countdown timer for hours, minutes, and seconds - JassWeb<\/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:\/\/jassweb.com\/solved\/solved-countdown-timer-for-hours-minutes-and-seconds\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] Countdown timer for hours, minutes, and seconds - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] The problem is if you save the time in cookie just before refresh and retrieve it after page loads it may not match the real current time because page may take arbitrary amount of time to refresh, 1st time it may be 1 sec 2nd time may be faster and take 0.5 sec due ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-countdown-timer-for-hours-minutes-and-seconds\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-24T21:49:24+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\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\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-countdown-timer-for-hours-minutes-and-seconds\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-countdown-timer-for-hours-minutes-and-seconds\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] Countdown timer for hours, minutes, and seconds\",\"datePublished\":\"2022-08-24T21:49:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-countdown-timer-for-hours-minutes-and-seconds\/\"},\"wordCount\":192,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"cookies\",\"javascript\",\"timer\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-countdown-timer-for-hours-minutes-and-seconds\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-countdown-timer-for-hours-minutes-and-seconds\/\",\"name\":\"[Solved] Countdown timer for hours, minutes, and seconds - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-08-24T21:49:24+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-countdown-timer-for-hours-minutes-and-seconds\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-countdown-timer-for-hours-minutes-and-seconds\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-countdown-timer-for-hours-minutes-and-seconds\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] Countdown timer for hours, minutes, and seconds\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] Countdown timer for hours, minutes, and seconds - JassWeb","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:\/\/jassweb.com\/solved\/solved-countdown-timer-for-hours-minutes-and-seconds\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] Countdown timer for hours, minutes, and seconds - JassWeb","og_description":"[ad_1] The problem is if you save the time in cookie just before refresh and retrieve it after page loads it may not match the real current time because page may take arbitrary amount of time to refresh, 1st time it may be 1 sec 2nd time may be faster and take 0.5 sec due ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-countdown-timer-for-hours-minutes-and-seconds\/","og_site_name":"JassWeb","article_published_time":"2022-08-24T21:49:24+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-countdown-timer-for-hours-minutes-and-seconds\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-countdown-timer-for-hours-minutes-and-seconds\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] Countdown timer for hours, minutes, and seconds","datePublished":"2022-08-24T21:49:24+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-countdown-timer-for-hours-minutes-and-seconds\/"},"wordCount":192,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["cookies","javascript","timer"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-countdown-timer-for-hours-minutes-and-seconds\/","url":"https:\/\/jassweb.com\/solved\/solved-countdown-timer-for-hours-minutes-and-seconds\/","name":"[Solved] Countdown timer for hours, minutes, and seconds - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-08-24T21:49:24+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-countdown-timer-for-hours-minutes-and-seconds\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-countdown-timer-for-hours-minutes-and-seconds\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-countdown-timer-for-hours-minutes-and-seconds\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] Countdown timer for hours, minutes, and seconds"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/4918","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=4918"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/4918\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=4918"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=4918"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=4918"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}