CODEWITHSUNDEEP
angulartypescriptmomentjs
PPS
PPS

Reputation: 552

How can we create a Angular 5/6/7 Anti-clock Countdown (Milliseconds)?

How can we create a AntiClock wise Countdown using Angular 5/6/7 .

For.ex. (countdown in milliseconds) 60.000 (60 seconds) .... moving anticlockwise for.ex. ( 42.526 in milliseconds ) .

below codes give the output by refreshing interval by 1 seconds, our code needs interval in milliseconds, like above example .

Thanks 

private _trialEndsAt;
private _diff: number;
private _days: number;
private _hours: number;
private _minutes: number;
private _seconds: number;
private _milliseconds: number;

ngOnInit() {
    this._trialEndsAt = "2018-12-28";
    Observable.interval(10).map((x) => {
        this._diff = Date.parse(this._trialEndsAt) - Date.parse(new Date().toString());
    }).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);
        this._milliseconds = this.getMilliseconds(60000);
    });
}

getDays(t){
    return Math.floor( t/(1000*60*60*24) );
}

getHours(t){
    return Math.floor( (t/(1000*60*60)) % 24 );
}

getMinutes(t){
    return Math.floor( (t/1000/60) % 60 );
}

getSeconds(t){
    return Math.floor( (t/1000) % 60 );
}

getMiliseconds(t){
    return Math.floor( (t) % 1000 );
}

Upvotes: 1

Views: 191

Answers (1)

Derviş Kayımbaşıoğlu
Derviş Kayımbaşıoğlu

Reputation: 30625

change the interval to something smaller than 1000.

Observable.interval(x).map(

you need to repace x with value between 0 and 1000. this value is refreshing interval.

and put function for milliseconds

getMiliseconds(t){
   return Math.floor( (t) % 1000 );
}

Please check: https://stackblitz.com/edit/angular-78vx6q

Upvotes: 1

Related Questions