包简介

JS function give the developer appilty to easy start count down timer with alot of options

README 文档

README

JS countdown timer with options to styling and print timer in short time

Screenshot from normal result

Screenshot for templete 1

Screenshot for templete 2

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

Countdown timer work with days, houres, minutes and seconds
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).
Countdown timer can be stop to custmize styling or to get template to init it as default value.
You have an option to determine the sperator for timer.
You can handling time over message.
You have an option to determind if timer will display d-h-m-s or h-m-s or m-s.
its an javascript functon and you dont need to include any other js/css lib.

Decencies

Nothing.

Installation:

The preferred way to install this extension is through composer.

Either run

php composer.phar require --prefer-dist aneeshikmat/time-down-counter "*@dev"

or you can install function with examples from: http://2nees.com/timeDownCounter

Usage

To use this function you need to add this code to your html:

<body>
............
<div id="time-down-counter"></div>
<script type="text/javascript" src="timeDownCounter.js"></script>
<script>
    // Run Default Counter option
    timeDownCounter({
        //options
    }).startCountDown();
</script>
</body>

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();

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.
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;.
countDownResSperator: This option give you apilty to change time Sperator, default sperator is : nested in tag.
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.
addSpanForResult: This option give you apilty to set each number groub in tag contain general class called item-counter-down.
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:

countDownOver: This option give you apilty to update message for count down over (when timer is finshed).
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 :

<div id="time-down-counter">30<span class="timeDownSperator">:</span>23<span class="timeDownSperator">:</span>59<span class="timeDownSperator">:</span>58</div>

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();

aneeshikmat/time-down-counter 适用场景与选型建议

aneeshikmat/time-down-counter 是一款基于 HTML 开发的 Composer 扩展包，目前已累计 44 次下载、GitHub Stars 达 2，最近一次更新时间为 2017 年 12 月 16 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「time」「counter」「down」「javascript timer」「js countdown timer」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 aneeshikmat/time-down-counter 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 aneeshikmat/time-down-counter 我们能提供哪些服务？

定制开发 / 二次开发

基于 aneeshikmat/time-down-counter 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

与 aneeshikmat/time-down-counter 相关的其它包

同方向 / 同关键字的高下载量 PHP Composer 包推荐，方便对比选型：

jlorente/yii2-widget-remainingcharacters 5

Widget to add a remaining character counter to text inputs and textareas

tchoulom/view-counter-bundle 15

The "View Counter" bundle

urbanplum/dotnet-datetime 2

Tools to convert between .NET and PHP date formats

professional-wiki/wikibase-edtf 8

Adds the EDTF data type to Wikibase

okipa/laravel-supervisor-downtime-notifier 8

Get notified when supervisor is down.

digifactory/laravel-partial-down 4

Put specific parts of your application in maintenance mode using

aneeshikmat/time-down-counter

包简介

关键字：