自定义倒计时jQuery,包含数据属性

时间:2016-05-12 09:25:18

标签: jquery countdown

我一直在尝试创建一个最小的jquery来显示Countdown。 我尝试使用像keith-wood script这样的其他代码片段但问题是它有一个巨大的jquery。我想在jquery中创建一个变量,调用通过数据属性调用并显示元素。我们期待的是在不使用第三方脚本的情况下创建一个重量较轻的jquery。

棘手的部分

我需要一个棘手的系统,如果我删除weeks块,那么我希望下一个有几天的块应该自动将这些周转换为几天并添加到天块中。因此,2天将显示366,即(52周= 364天)+ 2天。在演示中查看需要了解的日子。

我在HTML中添加了数据属性,我想从jquery中获取变量并在HTML块中生成输出。

.at-cd-timer{
  clear:both;
  position: relative;
  margin:30px 0;
}
.at-cd-inner {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.at-cd-inner:hover {
  text-decoration: none;
}
.at-cd-block {
  display: table-cell;
}
.at-cd-block-inner {
  display: block;
  margin:1px 1px 0 0;
  padding:20px;
  background-color:#dddddd;
}
.at-cd-time { 
  display: block;
  font-size:30px;
  line-height: 1em;
  color:inherit;
  text-decoration: none;
}
.at-cd-timelabel {
  display: block;
  text-transform:uppercase;
  color:inherit;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aligncenter { text-align: center; }
<div class="at-countdown-timer aligncenter" data-maximum="5" data-interval="1000" data-minute="0" data-hour="0" data-day="14" data-month="4" data-year="2017">

  <span class="at-cd-inner">

      <span class="at-cd-block at-cd-weeks">
            <span class="at-cd-block-inner">
                <span class="at-cd-time">52</span>
                <span class="at-dc-timelabel">Weeks</span>
            </span>
       </span>
        <span class="at-cd-block at-cd-days">
            <span class="at-cd-block-inner">
                <span class="at-cd-time">2</span>
                <span class="at-cd-timelabel">Days</span>
            </span>
        </span>
        <span class="at-cd-block at-cd-hours">
            <span class="at-cd-block-inner">
                <span class="at-cd-time">10</span>
                <span class="at-cd-timelabel">Hours</span>
            </span>
        </span>
        <span class="at-cd-block at-cd-minutes">
            <span class="at-cd-block-inner">
                <span class="at-cd-time">49</span>
                <span class="at-cd-timelabel">Minutes</span>
            </span>
        </span>
        <span class="at-cd-block at-cd-seconds">
            <span class="at-cd-block-inner">
                <span class="at-cd-time">35</span>
                <span class="at-cd-timelabel">Seconds</span>
            </span>
        </span>
    </span>
  </div>

If the Week block is removed then the result should automatically take

<div class="at-countdown-timer aligncenter" data-maximum="5" data-interval="1000" data-minute="0" data-hour="0" data-day="14" data-month="4" data-year="2017">
  <span class="at-cd-inner">


        <span class="at-cd-block at-cd-days">
            <span class="at-cd-block-inner">
                <span class="at-cd-time">366</span>
                <span class="at-cd-timelabel">Days</span>
            </span>
        </span>
        <span class="at-cd-block at-cd-hours">
            <span class="at-cd-block-inner">
                <span class="at-cd-time">10</span>
                <span class="at-cd-timelabel">Hours</span>
            </span>
        </span>
        <span class="at-cd-block at-cd-minutes">
            <span class="at-cd-block-inner">
                <span class="at-cd-time">49</span>
                <span class="at-cd-timelabel">Minutes</span>
            </span>
        </span>
        <span class="at-cd-block at-cd-seconds">
            <span class="at-cd-block-inner">
                <span class="at-cd-time">35</span>
                <span class="at-cd-timelabel">Seconds</span>
            </span>
        </span>
    </span>
</div>

0 个答案:

没有答案