vue中在一个页面如何设置多个倒计时

<script>

function countDownFun(time) {
  time--; //时间一秒秒的减
  let nowTime = new Date().getTime(); //现在时间
  if (nowTime <= time) {
    //获取时间差
    let timediff = Math.round((time - nowTime) / 1000);
    //获取还剩多少天
  let day = parseInt(timediff / 3600 / 24);
  //获取还剩多少小时
  let hour = parseInt((timediff / 3600) % 24);
  //获取还剩多少分钟
  let minute = parseInt((timediff / 60) % 60);
  //获取还剩多少秒
  let second = timediff % 60;
  return day + "天" + hour + "小时" + minute + "分" + second + "秒";
  } else {
    return "00天00小时00分00秒";
  }
}

export default {
  name: "meizhoupintuan",
  async created() {
    let data = await home_meizhou_api();
    this.list = data.data.list;
    this.timer();
  },
  data() {
    return {
      list: [],
      temp: null //倒计时初始
    };
  },
  methods: {
     timer() {
      //页面多个定时器 //主要逻辑都在这页面更新
      let _that = this;
      this.temp = setInterval(() => {
        this.list.forEach((item, index) => {
          item.dayTime = countDownFun(item.endAt);
          this.$set(this.list, item.dayTime, countDownFun(item.endAt));
        console.log(this.temp, "6");
        });
      }, 1000);
    },
  },
  destroyed() {
    //切记页面销毁需要销毁
    clearInterval(this.temp);
    console.log(this.temp, "销毁");
   }
};
</script>

原文地址:https://www.cnblogs.com/shy0113/p/11351078.html

时间: 2024-10-25 20:54:59

vue中在一个页面如何设置多个倒计时的相关文章

怎样在QML应用中调用系统设置中的页面来设置我们的系统

我们在QML应用中有时须要调用系统设置(system settings)来完毕我们的一些设置.比方,我们在使用GPS来定位时,可能GPS并没有打开,假设在我们的应用中直接打开系统中的GPS设置页面,这样我们就能够直接打开系统的GPS而不用单独设计一个页面.我们能够通过使用URL dispatcher的方法来打开另外一个应用.在先前的我们的文章中,我们已经讲述了非常多关于URL dispatcher方面的东西: 怎么在Ubuntu手机上发送短信及拨打电话 使用URL dispatcher的范例 关

如何在QML应用中调用系统设置中的页面来设置我们的系统

我们在QML应用中有时需要调用系统设置(system settings)来完成我们的一些设置.比如,我们在使用GPS来定位时,可能GPS并没有打开,如果在我们的应用中直接打开系统中的GPS设置页面,这样我们就可以直接打开系统的GPS而不用单独设计一个页面.我们可以通过使用URL dispatcher的方法来打开另外一个应用.在先前的我们的文章中,我们已经讲述了很多关于URL dispatcher方面的东西: 怎么在Ubuntu手机上发送短信及拨打电话 使用URL dispatcher的范例 关于

vue中嵌套页面 iframe 标签

vue中嵌套iframe,将要嵌套的文件放在static下面: <iframe src="../../../static/bear.html" width="300" height="300" frameborder="0" scrolling="auto"></iframe> src可以使用相对路径,也可使用服务器根路径http:localhost:8088/-等: <ifr

mvc中异常页面的设置

参考原文: http://blog.csdn.net/zjlovety/article/details/48734791 这种异常处理就是说,在mvc发生未处理异常时,对用户展示的页面. 第一种能被mvc捕捉: 1.我们可以利用异常过滤器,继承HandleErrorAttribute(或者继承FilterAttribute, IExceptionFilter如下图) ,重载OnException方法,然后将他加入到过滤器集合中,或者将特性加到相应的控制器或者方法上面: 2.在各自的控制器里,重写

在vue中使用axios实现跨域请求并且设置返回的数据的格式是json格式,不是jsonp格式

在vue中使用axios实现跨域请求 需求分析:在项目中需要抓取qq音乐的歌曲列表的数据,由于要请求数据的地址url=https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg.从qq音乐的官网上可以看到该请求的请求头中的referer中的域名是y.qq.com(发送请求页面的域名),而host的域名是c.y.qq.com(被请求页面的域名),由于两者不一样,所以不能通过前端直接发送请求给qq服务器去拿数据.这时候需要服务器做一个代理

angularjs中的页面访问权限设置

11月在赶一个项目,这阵子比较忙,挤挤时间更一篇博客吧,如标题所述说说在ng中页面访问权限控制的问题,水平有限各位看官见谅: 在以往的项目中,前后端常见的配合方式是前端提供页面和ui加一点DuangDuangDuang的效果,后端搭建框架数据结构和数据交互(数据交互前后端有交集),不管是.net.java or php都能一对多的提供前端服务,然而在新形式下项目中运用了前端框架,开发情况就不一样了,比如我要说的这是在angular框架下完成的开发,模式是后端提供服务和api文档,页面和数据交互及

七、vue中v-for有时候对页面不会重新渲染,数组变化后如何到渲染页面

v-for不能进行双向数据绑定,页面渲染完成后,再次更改v-for遍历的数据,js里面打印的数据看到数据值已经更改,但是页面的数据就是没有渲染,这是为什么呢? vue中v-for和angularjs中的ng-repeat不用 ,它对页面只进行一次渲染.后续如果需要更改数据且显示在页面上就需要想想其他办法啦~~~ 经过多次踩坑发现如下解决办法: 1.将vue引入当前页面,如下图所示: 2.使用Vue.set方法来对数据进行更改及渲染,如下图所示:

vue常见问题处理 -- 页面刷新时,如何保持原有vuex中的state信息

一.页面刷新时,如何保持原有vuex中的state信息 页面刷新后,原有的 vuex 中的 state 会发生改变,如果在页面刷新之前,可以将 state 信息保存,页面重新加载时,再将该值赋给 state,那么该问题即可解决. 1.localstorage 可以使用 localstorage 来保存信息. [在某组件中添加如下钩子函数.比如 App.vue中] created() { //在页面加载时读取localStorage里的状态信息 if (localStorage.getItem("

vue 在一个页面监听、定时用了之后要销毁,不然在其他页面会报错

1.在一个页面监听.定时用了之后要销毁 2.或者在监听.定时的运行代码,加判断限制 销毁: 加判断: 原文地址:https://www.cnblogs.com/XUYIYUAN/p/12368672.html