PHPackages aneeshikmat/time-down-counter - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. aneeshikmat/time-down-counter ActiveJavascript-function[Utility & Helpers](/categories/utility) aneeshikmat/time-down-counter ============================= JS function give the developer appilty to easy start count down timer with alot of options v1.0.0-stable(8y ago)244MITHTML Since Dec 18Pushed 7y ago2 watchersCompare [ Source](https://github.com/aneeshikmat/timeDownCounter)[ Packagist](https://packagist.org/packages/aneeshikmat/time-down-counter)[ RSS](/packages/aneeshikmat-time-down-counter/feed)WikiDiscussions master Synced 2w ago READMEChangelog (1)DependenciesVersions (3)Used By (0) timeDownCounter =============== [](#timedowncounter) JS countdown timer with options to styling and print timer in short time Screenshot from normal result ----------------------------- [](#screenshot-from-normal-result) [![Yii2 timeDownCounter screenshot_t1](https://camo.githubusercontent.com/682391fcef52badee792bffd448551c09bd63e6cee5cb3725b1cbafea522ba7f/687474703a2f2f326e6565732e636f6d2f6769746875622f74696d65446f776e436f756e7465722f74656d702d302e706e67)](https://camo.githubusercontent.com/682391fcef52badee792bffd448551c09bd63e6cee5cb3725b1cbafea522ba7f/687474703a2f2f326e6565732e636f6d2f6769746875622f74696d65446f776e436f756e7465722f74656d702d302e706e67) Screenshot for templete 1 ------------------------- [](#screenshot-for-templete-1) [![Yii2 timeDownCounter screenshot_temp1](https://camo.githubusercontent.com/bc6a0db6bc1808e1d8f675ecac8c2357f80feb0f268314d1d1dedeea6f3c46fc/687474703a2f2f326e6565732e636f6d2f6769746875622f74696d65446f776e436f756e7465722f74656d702d312e706e67)](https://camo.githubusercontent.com/bc6a0db6bc1808e1d8f675ecac8c2357f80feb0f268314d1d1dedeea6f3c46fc/687474703a2f2f326e6565732e636f6d2f6769746875622f74696d65446f776e436f756e7465722f74656d702d312e706e67) Screenshot for templete 2 ------------------------- [](#screenshot-for-templete-2) [![Yii2 timeDownCounter screenshot_temo2](https://camo.githubusercontent.com/78e33a784109791a8705cfea8209c481325ea354696a791a98bf368c66cc0e57/687474703a2f2f326e6565732e636f6d2f6769746875622f74696d65446f776e436f756e7465722f74656d702d322e706e67)](https://camo.githubusercontent.com/78e33a784109791a8705cfea8209c481325ea354696a791a98bf368c66cc0e57/687474703a2f2f326e6565732e636f6d2f6769746875622f74696d65446f776e436f756e7465722f74656d702d322e706e67) And you can custmize you'r template as yourr like, we give you an option to build and control your design or use our simple design and change color, distance ...etc as you like. Features -------- [](#features) 1. Countdown timer work with days, houres, minutes and seconds 2. Appilty to get timer html with fully html item container, or semi or none.(in other word you will get result dirctly or with html wrappring). 3. Countdown timer can be stop to custmize styling or to get template to init it as default value. 4. You have an option to determine the sperator for timer. 5. You can handling time over message. 6. You have an option to determind if timer will display d-h-m-s or h-m-s or m-s. 7. its an javascript functon and you dont need to include any other js/css lib. Decencies --------- [](#decencies) Nothing. Installation: ------------- [](#installation) The preferred way to install this extension is through [composer](https://getcomposer.org/). Either run `php composer.phar require --prefer-dist aneeshikmat/time-down-counter "*@dev"` or you can install function with examples from: Usage ----- [](#usage) To use this function you need to add this code to your html: ``` ............ // Run Default Counter option timeDownCounter({ //options }).startCountDown(); ``` As you see, its very simple, and now we will be explaning this code, and then go to display all option may be use to help us, In prev code we call timeDownCounter function, **startCountDown()** is used to start count down timer.(if you write this syntax dirctly without determind any option, you will git time over message). Now let's go to explain all possible option: ``` timeDownCounter({ 'countDownIdSelector': 'time-down-counter', 'countDownDate': new Date("Sep 5, 2018 15:37:25").getTime(), 'countDownResSperator': '-' 'countDownReturnData': 'from-hours', 'addSpanForResult': true, 'addSpanForEachNum': true, 'contDownOver': 'Time is expired, and you can say hello now :P', 'getTemplateResult': 0 }).startCountDown(); ``` 1. countDownIdSelector: This option give you apilty to change default timer wrapper, its usfall if you have more than one timer in the same html page, default selctor value is 'time-down-counter', and this selector must be an ID. 2. countDownDate: This option will accept count down date in millisecond, if you keep it empty the default value will be current time so that the count down over message will be print. Note: if you using **PHP** you can use strtotime('....') \* 1000 like **strtotime("+1 day") \* 1000;**. 3. countDownResSperator: This option give you apilty to change time Sperator, default sperator is **:** nested in tag. 4. countDownReturnData: This option give you apilty to display full timer result (days, hours, minutes, seconds), or (hours, minutes, seconds) or (minutes, seconds), and accpet options is ('from-days' is default, 'from-hours', 'from-minutes'). Note: This option will kep timer work nomraly without removed any value, just hide / show option. 5. addSpanForResult: This option give you apilty to set each number groub in tag contain general class called **item-counter-down**. 6. addSpanForEachNum: This option give you apilty to set each number in timer in tag contain general class called **inner-item-counter-down**. screenshot for html result for point 5 and 6: --------------------------------------------- [](#screenshot-for-html-result-for-point-5-and-6) [![Yii2 timeDownCounter screenshot_temo2](https://camo.githubusercontent.com/83255d38a55e13ca0b7118a31da44e20b50ba2bff482dedcb67856800dbd2e81/687474703a2f2f326e6565732e636f6d2f6769746875622f74696d65446f776e436f756e7465722f74656d702d332e706e67)](https://camo.githubusercontent.com/83255d38a55e13ca0b7118a31da44e20b50ba2bff482dedcb67856800dbd2e81/687474703a2f2f326e6565732e636f6d2f6769746875622f74696d65446f776e436f756e7465722f74656d702d332e706e67) 7. countDownOver: This option give you apilty to update message for count down over (when timer is finshed). 8. getTemplateResult: This option give you apilty to stop count down timer, the default value is 0 and thats mean timer work, **1** is mean stop timer and display timer result, **2** is mean stop timer and display html timer result. These option give you abilty to design / styling timer on browser dirctly, since the timer is work depednace of Interval function, and second option is usfall when you need to get result to set default value in html, since js need some time to start timing. example if we use **getTemplateResult: 2** : ``` 30:23:59:58 ``` Callback function ----------------- [](#callback-function) ``` // Run Counter with callback funtion, callback function will be come after options object like [ timeDownCounter({}, callback()) ] timeDownCounter({ 'countDownIdSelector': 'time-down-counter-5',// Set id for counter, default one is time-down-counter }, function(){ document.getElementById('time-down-counter-5').innerHTML = 'time-down-counter-5 is called callback function'; }).startCountDown(); ``` ### Health Score 29 — LowBetter than 57% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity11 Limited adoption so far Community8 Small or concentrated contributor base Maturity64 Established project with proven stability Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Unknown Total 1 Last Release 2991d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/4446b257c4fc469a3fe8c1802c941f8759139d7643feb4530de3bd882b8139e8?d=identicon)[aneeshikmat](/maintainers/aneeshikmat) --- Top Contributors [![aneeshikmat](https://avatars.githubusercontent.com/u/7778796?v=4)](https://github.com/aneeshikmat "aneeshikmat (24 commits)") --- Tags countdown-timercounterjavascriptjavascript-countdownjstimer-htmltimecounterdownjavascript timerjs countdown timer ### Embed Badge ![Health badge](/badges/aneeshikmat-time-down-counter/health.svg) ``` [![Health](https://phpackages.com/badges/aneeshikmat-time-down-counter/health.svg)](https://phpackages.com/packages/aneeshikmat-time-down-counter) ``` ### Alternatives [symfony/clock Decouples applications from the system clock 434192.7M338](/packages/symfony-clock)[knplabs/knp-time-bundle Making your dates and durations look sensible and descriptive 6239.3M51](/packages/knplabs-knp-time-bundle)[league/period Time range API for PHP 7335.7M22](/packages/league-period)[wapmorgan/morphos A morphological solution for Russian and English language written completely in PHP. Provides classes to inflect personal names, geographical names, decline and pluralize nouns, generate cardinal and ordinal numerals, spell out money amounts and time. 8261.3M7](/packages/wapmorgan-morphos)[brick/date-time Date and time library 3623.6M94](/packages/brick-date-time)[aeon-php/calendar PHP type safe, immutable calendar library 20410.2M16](/packages/aeon-php-calendar) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)