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

0

0

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://mcmap.net/q/271125/-time-countdown-in-angular-2

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 !!

Edile answered 14/6, 2017 at 12:43 Comment(2)
For my answer the hardcode date was just for example sake. Most probably you are going to retrieve that from the input. Observables have an interval method taking milliseconds as parameter.Sinatra
Can you please provide me some source from where I can do it ?Edile

© 2022 - 2024 — McMap. All rights reserved.