{"id":979,"date":"2018-10-31T07:02:52","date_gmt":"2018-10-31T07:02:52","guid":{"rendered":"https:\/\/wpdevdesign.wpengine.com\/?p=979"},"modified":"2022-06-15T16:36:27","modified_gmt":"2022-06-15T06:36:27","slug":"javascript-countdown-timer-in-oxygen","status":"publish","type":"post","link":"https:\/\/wpdevdesign.com\/javascript-countdown-timer-in-oxygen\/","title":{"rendered":"[Video] JavaScript Countdown Timer in Oxygen"},"content":{"rendered":"\n<p>The following screencast provides the steps to implement JavaScript Countdown Timer from <a href=\"https:\/\/www.w3schools.com\/howto\/howto_js_countdown.asp\" rel=\"noopener noreferrer\" target=\"_blank\">w3schools<\/a> in <a href=\"http:\/\/oxygenbuilder.com\" rel=\"noopener noreferrer\" target=\"_blank\">Oxygen<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<span class=\"OliW8XqjLxToZwduz1aYME05eFUsrmy3tJI9BgSNDGVb\"><iframe loading=\"lazy\" title=\"Countdown Timer in Oxygen\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/qDx92nL_-Tw?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/span>\n<\/div><\/figure>\n\n\n\n<p>JS code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Set the date we're counting down to\nvar countDownDate = new Date(\"Nov 23, 2018 00:00:00\").getTime();\n\n\/\/ Update the count down every 1 second\nvar x = setInterval(function() {\n\n  \/\/ Get todays date and time\n  var now = new Date().getTime();\n\n  \/\/ Find the distance between now and the count down date\n  var distance = countDownDate - now;\n\n  \/\/ Time calculations for days, hours, minutes and seconds\n  var days = Math.floor(distance \/ (1000 * 60 * 60 * 24));\n  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) \/ (1000 * 60 * 60));\n  var minutes = Math.floor((distance % (1000 * 60 * 60)) \/ (1000 * 60));\n  var seconds = Math.floor((distance % (1000 * 60)) \/ 1000);\n\n  \/\/ Display the result in the element with id=\"headline-63-11\"\n  document.getElementById(\"headline-63-11\").innerHTML = days + \"d \" + hours + \"h \"\n  + minutes + \"m \" + seconds + \"s \";\n\n  \/\/ If the count down is finished, write some text \n  if (distance &lt; 0) {\n    clearInterval(x);\n    document.getElementById(\"headline-63-11\").innerHTML = \"EXPIRED\";\n  }\n}, 1000);\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p><em>Update on March 24, 2020<\/em>: Setting the date and time to come from a custom field &#8211; <a href=\"https:\/\/wpdevdesign.com\/countdown-timer-using-acf-in-oxygen\/\" target=\"_blank\" aria-label=\"https:\/\/wpdevdesign.com\/countdown-timer-using-acf-in-oxygen\/ (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"rank-math-link\">https:\/\/wpdevdesign.com\/countdown-timer-using-acf-in-oxygen\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The following screencast provides the steps to implement JavaScript Countdown Timer from w3schools in Oxygen. JS code: Update on March 24, 2020: Setting the date and time to come from a custom field &#8211; https:\/\/wpdevdesign.com\/countdown-timer-using-acf-in-oxygen\/<\/p>\n","protected":false},"author":1,"featured_media":980,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_seopress_robots_primary_cat":"none","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"footnotes":""},"categories":[63,64],"tags":[125,23],"class_list":["post-979","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-free-content","category-oxygen","tag-javascript","tag-screencast"],"acf":[],"featured_image_src":"https:\/\/wpdevdesign.com\/wp-content\/uploads\/2018\/10\/oxygen-countdown-timer.png","featured_image_src_square":"https:\/\/wpdevdesign.com\/wp-content\/uploads\/2018\/10\/oxygen-countdown-timer.png","author_info":{"display_name":"Sridhar Katakam","author_link":"https:\/\/wpdevdesign.com\/author\/srikat\/"},"_links":{"self":[{"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/posts\/979","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/comments?post=979"}],"version-history":[{"count":0,"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/posts\/979\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/media\/980"}],"wp:attachment":[{"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/media?parent=979"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/categories?post=979"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/tags?post=979"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}