已知开始时间和总秒数,已经计算出了时分秒求倒计时计算方式...用的TS

WEB菜鸟
  • 276

1.已知开始时间和总秒数,已经计算出了时分秒求倒计时计算方式...用的TS;
2.输出结果为24:24:50,我想实现的是让它倒计时;
HTML:

      <p class="groupText_2">剩余<b #hour>00</b>:<b #minute>00</b>:<b #second>00</b>结束</p>
      
      TS代码:
      //DOM获取类似JS的获取DOM,对应HTML中的#hour/#minute/#second
      @ViewChild("hour") hour: ElementRef;
      @ViewChild("minute") minute: ElementRef;
      @ViewChild("second") second: ElementRef;
      
      
      var secondTime = 87890;// 秒
      var minuteTime = 0;// 分
      var hourTime = 0;// 小时
      if (secondTime > 60) {//如果秒数大于60,将秒数转换成整数
        //获取分钟,除以60取整数,得到整数分钟
        minuteTime = Math.floor(secondTime / 60);
        //获取秒数,秒数取佘,得到整数秒数
        secondTime = Math.floor(secondTime % 60);
        //如果分钟大于60,将分钟转换成小时
        if (minuteTime > 60) {
          //获取小时,获取分钟除以60,得到整数小时
          hourTime = Math.floor(minuteTime / 60);
          //获取小时后取佘的分,获取分钟除以60取佘的分
          minuteTime = Math.floor(minuteTime % 60);
        }
      }
      var resultTime = "" + Math.floor(secondTime);
      if (minuteTime > 0) {
        resultTime = "" + Math.floor(minuteTime) + ":" + resultTime;
      }
      if (hourTime > 0) {
        resultTime = "" + Math.floor(hourTime) + ":" + resultTime;
      }
      console.log(resultTime);
      // 秒
      this.second.nativeElement.innerHTML = Math.floor(secondTime);
      //分
      this.minute.nativeElement.innerHTML = Math.floor(minuteTime);
      //时
      this.hour.nativeElement.innerHTML = Math.floor(hourTime);
      
      
      
回复
阅读 2.3k
2 个回答

你先写一个只有秒的倒计时,弄清楚了再来搞这个

钻牛角尖了,这是答案:

  this.secondTime = 87900;
  this.interval = setInterval(() => {
    if(this.secondTime > 60){
      this.secondTime--;
      var secondTime = 0; //秒
      var minuteTime = 0;// 分
      var hourTime = 0;// 小时
      //如果秒数大于60,将秒数转换成整数
      if (this.secondTime > 60) {
        //获取分钟,除以60取整数,得到整数分钟
        minuteTime = Math.floor(this.secondTime / 60);
        //获取秒数,秒数取佘,得到整数秒数
        secondTime = Math.floor(this.secondTime % 60);
        //如果分钟大于60,将分钟转换成小时
        if (minuteTime > 60) {
          //获取小时,获取分钟除以60,得到整数小时
          hourTime = Math.floor(minuteTime / 60);
          //获取小时后取佘的分,获取分钟除以60取佘的分
          minuteTime = Math.floor(minuteTime % 60);
        }
      }
      // 秒
      this.second.nativeElement.innerHTML = Math.floor(secondTime);
      //分
      this.minute.nativeElement.innerHTML = Math.floor(minuteTime);
      //时
      this.hour.nativeElement.innerHTML = Math.floor(hourTime);
    } else {
      this.alertPri.presentToast('时间已截止');
      // 秒
      this.second.nativeElement.innerHTML = '00';
      //分
      this.minute.nativeElement.innerHTML = '00';
      //时
      this.hour.nativeElement.innerHTML = '00';
      clearInterval(this.interval);    
    }
  },1000)
  
  
  
  
  另一种有截止时间的实现方式:
  this.countTime = () => {
  var date = new Date();
  var now = date.getTime();    
  var endDate = new Date("2018-12-6 11:00:00");
  var end = endDate.getTime();
  this.leftTime = end - now;                             
  var d, h, m, s, ms;
  if(this.leftTime >= 0) {
      // d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
      h = Math.floor(this.leftTime / 1000 / 60 / 60);
      m = Math.floor(this.leftTime / 1000 / 60 % 60);
      s = Math.floor(this.leftTime / 1000 % 60);
      ms = Math.floor(this.leftTime % 1000);
      if(ms < 100) {
          ms = "0" + ms;
      }
      if(s < 10) {
          s = "0" + s;
      }
      if(m < 10) {
          m = "0" + m;
      }
      if(h < 10) {
          h = "0" + h;
      }
      this.hour.nativeElement.innerHTML = h;
      this.minute.nativeElement.innerHTML = m;
      this.second.nativeElement.innerHTML = s;
  }
}

setInterval(this.countTime, 50);
if(this.leftTime < 0){
  //this.alertService.presentToast('时间已截止');
  clearInterval(this.countTime);
  this.hour.nativeElement.innerHTML = '00';
  this.minute.nativeElement.innerHTML = '00';
  this.second.nativeElement.innerHTML = '00';
}
宣传栏