{"id":3577,"date":"2022-08-16T07:01:38","date_gmt":"2022-08-16T07:01:38","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3577"},"modified":"2023-06-10T11:35:59","modified_gmt":"2023-06-10T11:35:59","slug":"jquery-tutorial-the-final-countdown-with-jquery-countdown","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/jquery-tutorial-the-final-countdown-with-jquery-countdown\/","title":{"rendered":"jQuery Tutorial &#8211; The Final Countdown with jQuery.countdown"},"content":{"rendered":"<p><span style=\"color: #ef3207;\"><a style=\"color: #ef3207;\" href=\"https:\/\/rengga.dev\/\" target=\"_blank\" rel=\"noopener\"><strong>Rengga Dev<\/strong><\/a> <\/span>&#8211; A simple and html agnostic date countdown plugin for jQuery.<\/p>\n<h2>All countdown styles in one<\/h2>\n<p class=\"lead\">Take control of your DOM, register yours callbacks and start counting!<\/p>\n<p>The Final Countdown is a plugin tailored to be used in any layout, without any CSS\/HTML dependency. The goal was to fit and mimic differents countdown styles as you see out there in\u00a0<strong>coupons<\/strong>\u00a0and\u00a0<strong>auction<\/strong>\u00a0sites.<\/p>\n<p>There are few ways to get started, the simplest example is as shown here, but we support many different countdown styles.<\/p>\n<p><iframe style=\"width: 100%;\" title=\"jQuery Tutorial - The Final Countdown with jQuery.countdown\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/rNKVbVy?default-tab=result&amp;theme-id=dark\" height=\"400\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/rNKVbVy\"><br \/>\njQuery Tutorial &#8211; The Final Countdown with jQuery.countdown<\/a> by Rengga Gumilar (<a href=\"https:\/\/codepen.io\/renggagumilar\">@renggagumilar<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">var labels = ['weeks', 'days', 'hours', 'mins', 'secs'],\r\n  nextYear = (new Date('December 30, 2022 10:00:00')),\r\n  template = _.template('&lt;div class=\"time &lt;%= label %&gt;\"&gt;&lt;span class=\"count curr top\"&gt;&lt;%= curr %&gt;&lt;\/span&gt;&lt;span class=\"count next top\"&gt;&lt;%= next %&gt;&lt;\/span&gt;&lt;span class=\"count next bottom\"&gt;&lt;%= next %&gt;&lt;\/span&gt;&lt;span class=\"count curr bottom\"&gt;&lt;%= curr %&gt;&lt;\/span&gt;&lt;span class=\"label\"&gt;&lt;%= label.length &lt; 6 ? label : label.substr(0, 3)  %&gt;&lt;\/span&gt;&lt;\/div&gt;'),\r\n  currDate = '00:00:00:00:00',\r\n  nextDate = '00:00:00:00:00',\r\n  parser = \/([0-9]{2})\/gi,\r\n  $example = $('#main-example');\r\n\/\/ Parse countdown string to an object\r\nfunction strfobj(str) {\r\n  var parsed = str.match(parser),obj = {};\r\n  labels.forEach(function(label, i) {\r\n    obj[label] = parsed[i]\r\n  });\r\n  return obj;\r\n}\r\n\/\/ Return the time components that diffs\r\nfunction diff(obj1, obj2) {\r\n  var diff = [];\r\n  labels.forEach(function(key) {\r\n    if (obj1[key] !== obj2[key]) {\r\n      diff.push(key);\r\n    }\r\n  });\r\n  return diff;\r\n}\r\n\/\/ Build the layout\r\nvar initData = strfobj(currDate);\r\nlabels.forEach(function(label, i) {\r\n  $example.append(template({\r\n    curr: initData[label],\r\n    next: initData[label],\r\n    label: label\r\n  }));\r\n});\r\n\/\/ Starts the countdown\r\n$example.countdown(nextYear, function(event) {\r\n  var newDate = event.strftime('%w:%d:%H:%M:%S'),data;\r\n  if (newDate !== nextDate) {\r\n    currDate = nextDate;\r\n    nextDate = newDate;\r\n    \/\/ Setup the data\r\n    data = {\r\n      'curr': strfobj(currDate),\r\n      'next': strfobj(nextDate)\r\n    };\r\n    \/\/ Apply the new values to each node that changed\r\n    diff(data.curr, data.next).forEach(function(label) {\r\n      var selector = '.%s'.replace(\/%s\/, label),\r\n        $node = $example.find(selector);\r\n      \/\/ Update the node\r\n      $node.removeClass('flip');\r\n      $node.find('.curr').text(data.curr[label]);\r\n      $node.find('.next').text(data.next[label]);\r\n      \/\/ Wait for a repaint to then flip\r\n      _.delay(function($node) {\r\n        $node.addClass('flip');\r\n      }, 50, $node);\r\n    });\r\n  }\r\n});<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Rengga Dev &#8211; A simple and html agnostic date countdown plugin for <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/jquery-tutorial-the-final-countdown-with-jquery-countdown\/\" title=\"jQuery Tutorial &#8211; The Final Countdown with jQuery.countdown\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3578,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20,12],"tags":[381,264,379,263,380,103,227],"newstopic":[],"class_list":{"0":"post-3577","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript","8":"category-web-development","9":"tag-countdown-plugin","10":"tag-javascript-tutorial","11":"tag-jquery-countdown","12":"tag-js-tutorial","13":"tag-the-final-countdown","14":"tag-web-design","15":"tag-web-designer"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3577","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=3577"}],"version-history":[{"count":2,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3577\/revisions"}],"predecessor-version":[{"id":3580,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3577\/revisions\/3580"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3578"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=3577"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=3577"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=3577"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=3577"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}