Angular2,Ionic2: How to create a countdown timer with hours,mins,secs and millisecs?

半世苍凉 提交于 2019-12-12 06:46:05

问题


I want to create a countdown timer which has 4 fields hours:minutes:seconds:milliseconds. I've gone through the following links before I posted this question.I don't know why should we have a hardcoded date and then subtract something from it. I'm not able to get the concept of Observable here.

Time CountDown in angular 2

Angular 2 - Countdown timer

Can someone please help me?

This is what I've written from https://stackoverflow.com/a/40784539/4579897

private eventDate: Date = new Date(2018, 1, 15);
private diff: number;
private countDownResult: number;
private days: number;
private hours: number;
private minutes: number;
private seconds: number;

constructor(public navCtrl: NavController, public navParams: NavParams,elm: ElementRef) {
      Observable.interval(1000).map((x) => {
            this.diff = Math.floor((this.eventDate.getTime() - new Date().getTime()) / 1000);
        }).subscribe((x) => {           
            this.days = this.getDays(this.diff);
            this.hours = this.getHours(this.diff);
            this.minutes = this.getMinutes(this.diff);
            this.seconds = this.getSeconds(this.diff);
        });
}

getDays(t){
    var days;
    days = Math.floor(t / 86400);

    return days;
}

getHours(t){
    var days, hours;
    days = Math.floor(t / 86400);
    t -= days * 86400;
    hours = Math.floor(t / 3600) % 24;

    return hours;
}

getMinutes(t){
    var days, hours, minutes;
    days = Math.floor(t / 86400);
    t -= days * 86400;
    hours = Math.floor(t / 3600) % 24;
    t -= hours * 3600;
    minutes = Math.floor(t / 60) % 60;

    return minutes;
}

getSeconds(t){
    var days, hours, minutes, seconds;
    days = Math.floor(t / 86400);
    t -= days * 86400;
    hours = Math.floor(t / 3600) % 24;
    t -= hours * 3600;
    minutes = Math.floor(t / 60) % 60;
    t -= minutes * 60;
    seconds = t % 60;

    return seconds;
}

But this has "day" in it which I don't want.I want milliseconds instead and also if someone can explain me what does

 Observable.interval(1000).map((x) => {
                this.diff = Math.floor((this.eventDate.getTime() - new Date().getTime()) / 1000);
            })

mean ? I want to know what should be the code in the html page. Thanks in advance !!

来源:https://stackoverflow.com/questions/44545167/angular2-ionic2-how-to-create-a-countdown-timer-with-hours-mins-secs-and-millis

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!