vue前端实现倒计天数的功能

有些网页会对一些赛事倒计时进行展示，这里以倒计时天数为例来记录学习一下。

计算倒计时天数

因为是前端，这里使用js来计算

function countDown(date) {
        var EndTime = new Date(date);
        var NowTime = new Date();
        var t = EndTime.getTime() - NowTime.getTime();
        var res = Math.floor(t / 1000 / 60 / 60 / 24) > 0 ? Math.floor(t / 1000 / 60 / 60 / 24) : 0;
        return res;
}

这里仅仅返回天数。

computed来计算监视参数

这里的函数写法有一点特殊，需要闭包传值。如果没有传参的数就不需要这么麻烦啦~

  computed: {
    stars: function () {
      return function (date) {
        var EndTime = new Date(date);
        var NowTime = new Date();
        var t = EndTime.getTime() - NowTime.getTime();
        var res = Math.floor(t / 1000 / 60 / 60 / 24) > 0 ? Math.floor(t / 1000 / 60 / 60 / 24) : 0;
        return res;
      }
    }
  }

前端展示

数据大家自己造的吧，这里不给了QAQ

        <sui-list>
          <sui-list-item v-for="(item, key) in competitions" class="suiItem">
            <div style="justify-items: center">
                <span style="font-size: 18px">
                <a :href=item.sign>{{ item.name }}</a>
                </span>
              <br>
              <span style="color:gray">倒计时: {{ stars(item.date) }}天</span>
            </div>
            <div class="ui divider"></div>
          </sui-list-item>
        </sui-list>