{"id":16275226,"url":"https://github.com/ghostff/jquery-countdown-timer","last_synced_at":"2025-10-16T07:15:52.427Z","repository":{"id":81383282,"uuid":"88233743","full_name":"Ghostff/jQuery-Countdown-Timer","owner":"Ghostff","description":"Easy and dynamic time countdown system","archived":false,"fork":false,"pushed_at":"2017-04-14T20:42:01.000Z","size":14,"stargazers_count":1,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-14T12:54:34.990Z","etag":null,"topics":["countdown-clock","countdown-timer","javascript","jquery","js","time"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Ghostff.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-04-14T04:46:57.000Z","updated_at":"2021-07-29T15:11:57.000Z","dependencies_parsed_at":null,"dependency_job_id":"237d5b95-c63a-4de2-be86-1bd6fa121891","html_url":"https://github.com/Ghostff/jQuery-Countdown-Timer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ghostff%2FjQuery-Countdown-Timer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ghostff%2FjQuery-Countdown-Timer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ghostff%2FjQuery-Countdown-Timer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ghostff%2FjQuery-Countdown-Timer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ghostff","download_url":"https://codeload.github.com/Ghostff/jQuery-Countdown-Timer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247880088,"owners_count":21011588,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["countdown-clock","countdown-timer","javascript","jquery","js","time"],"created_at":"2024-10-10T18:32:31.977Z","updated_at":"2025-10-16T07:15:47.380Z","avatar_url":"https://github.com/Ghostff.png","language":"JavaScript","readme":"# jQuery-Countdown-Timer\nEasy and dynamic time countdown system\n\n```html\n\u003cscript type=\"text/javascript\" src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"src/countdown.js\"\u003e\u003c/script\u003e\n\n\u003cdiv class=\"count_down\" d-date=\"April 14, 2017 11:50:00\"\u003e\u003c/div\u003e\n\u003cdiv class=\"count_down\" d-date=\"April 15, 2017 11:50:00\"\u003e\u003c/div\u003e\n\n```\nInitializing plugin \n```js\n $('.count_down').countdown();\n```\n``0D:09H:47M:18S``   \n``0D:21H:48M:32S``  \n\n## Optional plugin configurations on initialization\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cstrong\u003eday\u003c/strong\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003csmall\u003eobject\u003c/small\u003e\u003c/td\u003e\n    \u003ctd\u003eThe attributes that will be rendered to the day html element. 'text' attribute will be appended to the current day(s)\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cstrong\u003ehour\u003c/strong\u003e\u003c/td\u003e\n    \u003ctd width=\"17%\"\u003e\u003csmall\u003eobject\u003c/small\u003e\u003c/td\u003e\n    \u003ctd\u003eThe attributes that will be rendered to the hour html element. 'text' attribute will be appended to the current hour(s)\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cstrong\u003eminute\u003c/strong\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003csmall\u003eobject\u003c/small\u003e\u003c/td\u003e\n    \u003ctd\u003eThe attributes that will be rendered to the minute html element. 'text' attribute will be appended to the current minute(s)\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cstrong\u003esecond\u003c/strong\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003csmall\u003eobject\u003c/small\u003e\u003c/td\u003e\n    \u003ctd\u003eThe attributes that will be rendered to the second html element. 'text' attribute will be appended to the current second(s)\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cstrong\u003eupdate\u003c/strong\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003csmall\u003enumber : 1000\u003c/small\u003e\u003c/td\u003e\n    \u003ctd\u003eThe time update rate(milliseconds)\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cstrong\u003eplaceholder\u003c/strong\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003csmall\u003estring : d-date\u003c/small\u003e\u003c/td\u003e\n    \u003ctd\u003eThe attribute name of the html element where end date is stored and will be compared from\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n      \u003ctd\u003e\u003cstrong\u003edate\u003c/strong\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003csmall\u003estring\u003c/small\u003e\u003c/td\u003e\n      \u003ctd\u003eFor some reasons you don't want to pass your countdown date to a placeholder, or you want a global date for all countdown element, then you can pass the end date as a value to this index\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n      \u003ctd\u003e\u003cstrong\u003eonComplete\u003c/strong\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003csmall\u003efunction\u003c/small\u003e\u003c/td\u003e\n      \u003ctd\u003eA function that will be called when time elapses. This function accepts a single argument which is the object of the current html element that countdown is being rendered in\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## Date usage approaches\nNote: doing this:\n```html\n\u003cdiv class=\"count_down\" m-date=\"April 15, 2017 11:50:00\"\u003e\u003c/div\u003e\n```\n```js\n$('.count_down').countdown({placeholder: 'm-date'});\n```\nIs same as:\n```html\n\u003cdiv class=\"count_down\"\u003e\u003c/div\u003e\n```\n```js\n$('.count_down').countdown({date: 'April 15, 2017 11:50:00'});\n```\nThough each approach have its ups/downs.\n   \n   \n## Configuration work though\n\nBy default\n```js\n $('.count_down').countdown();\n```\noutputs: ``2D:10H:27M:46S``\n\n```js\n $('.count_down').countdown({\n     day: {\n         text: 'Days ',\n     },\n     hour: {\n         text: 'Hours ',\n     },\n     minute: {\n         text: 'Minutes ',\n     },\n     second: {\n         text: 'Seconds',\n     },\n });\n```\noutputs: ``2Days 10Hours 27Minutes 46Seconds``.       \nAnd yes, you can get more creative with the configurations.\n```js\n$('.count_down').countdown({\n    day: {\n        class: 'day-class',\n        id: 'day-id',\n        style: 'color:red'\n    },\n    hour: {\n        text: 'H: ',\n        style: 'color:green;'\n    },\n    minute: {\n        text: 'M: ',\n        style: 'color:black;'\n    },\n    second: {\n        text: 'S ',\n        style: 'color:black;'\n    },\n    update: 1000,\n    placeholder: 'd-date',\n    date: 'April 15, 2017 11:50:20',\n    onComplete: function (e) {\n        e.addClass('expired');\n        return 'Expired';\n    }\n});\n```\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fghostff%2Fjquery-countdown-timer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fghostff%2Fjquery-countdown-timer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fghostff%2Fjquery-countdown-timer/lists"}