显示离子HTML页面中每秒更改的分钟和秒

时间:2019-05-15 17:40:57

标签: typescript ionic3 angular5

我制作了一个Java脚本倒数计数器,并使用此行显示分钟和秒数

document.getElementById("demo").innerHTML = Number(this.minutes) + 'm' + Number(this.seconds) + 's ';

但是在ios中,由于此行,它向我显示了NANm NAN。所以我想用其他方式显示分钟和秒。

这是我的打字稿代码。

 if ((this.Fajardistance <= '59') && (this.Fajardistance >= '0')) {

    let current_datetime = new Date()
    let formatted_date = current_datetime.getFullYear() + "-" + (current_datetime.getMonth() + 1) + "-" + current_datetime.getDate()
    console.log("formatted_date", formatted_date);

    // Set the date we're counting down to
    var countDownDate = new Date(`${formatted_date.toString()} ${value.fajar_iqamah}`).getTime();        
    console.log("countDownDate", countDownDate);

    // Update the count down every 1 second
    this.interavalTime = setInterval(function () {

      // Get todays date and time
      var now = new Date().getTime();

      // Find the distance between now and the count down date
      var distance = countDownDate - now;

      this.testing = false;
      // Time calculations for days, hours, minutes and seconds
      this.minutes = Math.floor((Number(distance) % (1000 * 60 * 60)) / (1000 * 60));
      this.seconds = Math.floor((Number(distance) % (1000 * 60)) / 1000);

      //In these consoles minutes and seconds are as desired output just want to show them 
      console.log("Minutes:", this.minutes);
      console.log("Seconds:", this.seconds);

      //I was using this line to display minutes and seconds but it's incorrect way to display in ios devices.

      //document.getElementById("demo").innerHTML = Number(this.minutes) + 'm' + Number(this.seconds) + 's ';


      //  // If the count down is over, write some text 
      if (distance < 0) {
        clearInterval(this.interavalTime);

        document.getElementById("demo").style.display = "none";
      }
      //console.log("Inside notification function outside if");


    }, 1000);

  }

Home.Html

<!--<span mode="md" id="demo" style="text-align:right;font-size: 16px; display:inline-block;margin-left: 16px;  margin-top: 0px; color:red;"></span>-->

我之前使用的是上面注释的方法来显示,但对于ios而言,这不是正确的方法。

1 个答案:

答案 0 :(得分:0)

您的代码有很多问题。

  1. value.fajar_iqamah是什么?
  2. 您正在做 countDownDate-现在现在将始终大于countDown,因此您的间隔将仅运行一次。
  3. 即使您将 countDownDate-立即 now-countDownDate 切换,距离也会始终大于0,实际上它将保持增加而不是减小。
  4. li>