README

为 yii2 开发的 Widget，支持多种选项来启动倒计时计时器，此 Widget 依赖于 timeDownCounter JS 库

正常结果截图

模板 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/yii2-time-down-counter "v1.1.0-stable"

或添加

"aneeshikmat/yii2-time-down-counter": "v1.1.0-stable"

到您的 composer.json 文件的 require 部分中。

使用方法

要使用此 Widget，您需要将以下代码添加到您的 HTML 中

<?php
    use aneeshikmat\yii2\Yii2TimerCountDown\Yii2TimerCountDown;
?>

<body>
............
<div class="row">
    <div class="alert alert-success">
        Using Widget With Default Option
    </div>
    <div class="col-xs-12">
        <div id="time-down-counter"></div>
        <?= Yii2TimerCountDown::widget() ?>
    </div>
</div>

如您所见，它非常简单，现在我们将解释此代码，然后转到显示所有可能使用的选项，以帮助我们，在上面的代码中，我们调用 Yii2TimerCountDown Widget。（如果您直接以这种语法写入而未指定任何选项，您将获得时间到消息）。

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


<?php
  $callBackScript = <<<JS
            alert('Timer Count Down 6 Is finshed!!');
JS;
?>

        <div id="time-down-counter-2"></div>
        <?= Yii2TimerCountDown::widget([
            'countDownIdSelector' => 'time-down-counter-2',
            'countDownDate' => strtotime('+1 minutes') * 1000,// You most * 1000 to convert time to milisecond
            'countDownResSperator' => ':',
            'addSpanForResult' => false,
            'addSpanForEachNum' => false,
            'countDownOver' => 'Expired',
            'countDownReturnData' => 'from-days',
            'templateStyle' => 0,
            'getTemplateResult' => 0,
            'addServerTime' => false,
            'callBack' => $callBackScript
        ]) ?>

countDownIdSelector: 此选项允许您更改默认计时器包装器，这在同一页面上有多个计时器时很有用，默认选择器值是 'time-down-counter'，并且此选择器必须是 ID。
countDownDate: 此选项将接受以毫秒为单位的倒计时日期，如果留空，则默认值为当前时间，因此倒计时结束消息将被打印。注意：您需要将时间设置为毫秒，例如 strtotime("+1 day") * 1000; 或 strtotime("2018-11-10 15:47:25") * 1000。
countDownResSperator: 此选项允许您更改时间分隔符，默认分隔符是 <span class="timeDownSperator">:</span>。
countDownReturnData: 此选项允许您显示完整的计时器结果（天、小时、分钟、秒），或（小时、分钟、秒）或（分钟、秒），并接受选项是 ('from-days' 为默认值，'from-hours'，'from-minutes')。注意：此选项将保持计时器正常工作而不会删除任何值，只是隐藏/显示选项。
addSpanForResult: 此选项允许您设置每个数字组在标签中包含通用类 item-counter-down。
addSpanForEachNum: 此选项允许您设置计时器中的每个数字在标签中包含通用类 inner-item-counter-down。
addServerTime: 如果将其设置为 true，倒计时计时器将从服务器获取当前时间并将其设置为计算倒计时（此比较将设置在服务器时间之间）。- 默认选项为 false。

第 5 和 6 点的 HTML 结果截图

contDownOver：此选项为您提供更新倒计时结束消息的功能（当计时器结束时）。
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>

templateStyle：此选项为您提供使用该小部件默认设置的模板之一的功能，并且您可以在您的CSS文件中覆盖这些模板...等等，此选项有三个值（0表示无模板，默认值，1，2）。注意：如果您设置模板为1或2，则addSpanForResult & addSpanForEachNum将更改为true！。
callBack：此选项用于设置计时器结束后要执行的脚本。（回调函数）

aneeshikmat / yii2-time-down-counter

维护者

详细信息