Angular4 订单倒计时ts实现

发布于 2022-09-06 20:00:26 字数 1179 浏览 19 评论 0

这个小功能当前需求是,从服务器取一个时间值--秒数,页面刷新一次,取一次。比如第一次是1800秒,10分钟后刷新,返回1200秒。前端页面只管 倒计时,时间清零,取消支付按钮即可。
在component.ts里timer = setInterval(countDown, 1000);这句该如何处理,最终实现绑定?

===========================================================
简单概括就是:刷新时读取一个 <= 1800 秒 的时间,做分、秒两个字段的倒计时绑定到页面,时间为0时,执行一个事件。

下面这种做法是不是太麻烦初级了啊?

export class TimerComponent implements OnInit {
  timeDown: any;
  constructor() { }
  ngOnInit() {
    this.timeDown = this.resetTime(list.time);  //假如list.time是返回时间
  }

  resetTime(time) {
    const timer = null;
    const t = time;
    let m: any;
    let s: any;
    let msg: any;
    m = Math.floor(t / 60 % 60);
    if (m < 10) {
      m = '0' + m;
    }
    s = Math.floor(t % 60);
    function countDown() {
      s--;
      if (m < 10) {
        s = '0' + s;
      }
      if (s.length >= 3) {
        s = 59;
        m = +(Number(m) - 1);
      }
      if (m.length >= 5) {
        m = '00';
        s = '00';
        clearInterval(timer);
      }
      console.log(m + '分钟' + s + '秒');
      msg = m + '分钟' + s + '秒';
      return msg;
    }
    timer = setInterval(countDown, 1000);
  }
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

resetTime(time: number) {
    function countdown() {
      var s = time % 60
      var m = Math.floor((time / 60)) % 60
      var msg = `${(m < 10 ? '0' : '') + m}分钟${(s < 10 ? '0' : '') + s}秒`
      if (--time > 0) {
        setTimeout(countdown, 1000)
      } else {
        // 做结束的事
      }
    }
    countdown()
  }
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文