TimerCounter

LastUpdate : 2019/08/27

倒數計時器。

Structure

<div class="module-timercounter" style=" width:{width}px; margin: 0 auto; height:{height}px">

    <!-- if not image -->
    <div class="image-container" style="background-color:{color}" ></div>
    <!-- else if has image and imageOpacity == 0 -->
    <div class="image-container" style="background-color:{color}" ></div>
    <!-- else -->
    <div class="image-container image" 
    style="background-image: url({image});background-position:{imagePosition};opacity:{imageOpacity};">
    </div>

    <div class="datetimeGroup">
        <!-- if data.title != '' -->
        <div class="title-container">
        <p>{data.title}</p>
        </div>

        <!-- if data.datetime != '' -->
        <div class="datetime-container" data-datetime="{data.datetime}">
        <ul class="Clock" style="color:{timerColor}">
            <li class="Clock-weeks">
                <span>0</span>
                <!-- if data.weekName != '' -->
                {data.weekName}
                <!-- else -->
                <p style="text-align: center;">Weeks(s)</p>
            </li>
            <li class="Clock-days">
                <span>0</span>
                <!-- if data.dayName != '' -->
                {data.dayName}
                <!-- else -->
                <p style="text-align: center;">Day(s)</p>
            </li>
            <li class="Clock-hours">
                <span>0</span>
                <!-- if data.hourName != '' -->
                {data.hourName}
                <!-- else -->
                <p style="text-align: center;">Hour(s)</p>
            </li>
            <li class="Clock-minutes">
                <span>0</span>
                <!-- if data.minuteName != '' -->
                {data.minuteName}
                <!-- else -->
                <p style="text-align: center;">Minute(s)</p>
            </li>
            <li class="Clock-seconds">
                <span>0</span>
                <!-- if data.secondName != '' -->
                {data.secondName}
                <!-- else -->
                <p style="text-align: center;">Second(s)</p>
            </li>
        </ul>
        </div>

    </div>
</div>