README

JavaScript 倒计时计时器，可进行样式化和快速打印计时器

普通结果的截图

模板 1 的截图

模板 2 的截图

您可以根据自己的喜好定制模板，我们提供了构建和控制设计或使用我们的简单设计并更改颜色、间距等选项。

功能

倒计时计时器与天、小时、分钟和秒工作
适用于获取完全的 HTML 项容器计时器 html，或半或无。（换句话说，您将直接获取结果或带有 HTML 包装的结果）。
倒计时计时器可以停止以自定义样式或获取模板以将其初始化为默认值。
您可以选择计时器的分隔符。
您可以处理时间超出的消息。
您可以选择计时器是否显示 d-h-m-s 或 h-m-s 或 m-s。
这是一个 JavaScript 函数，您不需要包含任何其他 js/css 库。

依赖

无。

安装

安装此扩展的首选方式是通过 composer。

运行以下命令之一：

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

或者您可以从以下位置安装函数示例： http://2nees.com/timeDownCounter

用法

要使用此函数，您需要将以下代码添加到您的 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>

如您所见，它非常简单，现在我们将解释此代码，然后转到显示所有可能的选项，可能有助于我们，在前一个代码中，我们调用了 timeDownCounter 函数，startCountDown() 用于启动倒计时计时器。（如果您直接以这种语法写入而未指定任何选项，您将获得时间超出的消息）。

现在让我们解释所有可能的选项

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：此选项允许您更改默认的计时器包装器，这通常适用于您在同一 HTML 页面上有多个计时器的情况，默认选择器值为 'time-down-counter'，此选择器必须是 ID。
countDownDate：此选项将接受毫秒计数的倒计时日期，如果您将其留空，则默认值为当前时间，因此倒计时超出的消息将被打印。注意：如果您使用 PHP，则可以使用 strtotime('....') * 1000，例如 strtotime("+1 day") * 1000;。
countDownResSperator：此选项允许您更改时间分隔符，默认分隔符为 : 嵌入在标签中。
countDownReturnData：此选项允许您显示完整的计时器结果（天、小时、分钟、秒），或（小时、分钟、秒）或（分钟、秒），接受的选项是 ('from-days' 是默认值，'from-hours'，'from-minutes')。注意：此选项将使计时器正常工作而无需删除任何值，只需隐藏/显示选项。
addSpanForResult：此选项允许您设置标签中包含名为 item-counter-down 的通用类的每个数字组。
addSpanForEachNum：此选项允许您设置计时器中的每个数字在标签中包含名为 inner-item-counter-down 的通用类。

第 5 点和第 6 点的 HTML 结果截图

countDownOver：此选项允许您更新倒计时结束时（当计时器结束时）的消息。
getTemplateResult：此选项为您提供停止倒计时计时器的功能，默认值为0，表示计时器正在运行；1表示停止计时器并显示计时结果；2表示停止计时器并显示HTML计时结果。这些选项使您能够直接在浏览器中设计和样式化计时器，因为计时器的工作依赖于Interval函数，而第二个选项通常在您需要获取结果以在HTML中设置默认值时使用，因为JavaScript需要一些时间来开始计时。

示例：如果我们使用getTemplateResult: 2

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

回调函数


// 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

维护者

详细信息