javascript - Angular 2 反向倒数计时器

标签 javascript angular typescript

我正在为 Angular 项目寻找反向倒数计时器。像这样的:https://harshen.github.io/jquery-countdownTimer/

我尝试了所有的 observable 和 rxjs 计时器,但似乎没有什么能满足我的项目的需要。有人可以帮助我使用反向倒数计时器或修改上面的链接代码以在 Angular 项目中使用吗?

最佳答案

export class CountDown {

    // Hardcoded date
    private endDate: Date = new Date(2018, 9, 22);

    private diff: number;
    private countDownResult: number;
    private days: number;
    private hours: number;
    private minutes: number;
    private seconds: number;

    constructor() {

        Observable.interval(1000).map((x) => {
                this.diff = Math.floor((this.endDate.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;
    }

关于javascript - Angular 2 反向倒数计时器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47606644/

相关文章:

javascript - React 无法识别传递给 Material UI 中样式化组件的 Prop

pattern-matching - 您如何在 TypeScript 中模拟 ADT 和模式匹配?

javascript - Ajax 调用 -> 生成 html -> 下一个 ajax 调用更改生成的 html 的 CSS

dependency-injection - 将一个服务注入(inject)另一个服务

javascript - 极小极大算法的井字游戏

Angular 5 import Google gapi witn @types/gapi.auth2 不工作

javascript - 如何使用 TypeScript 从包装的组件访问公共(public)方法?

javascript - 访问 ng-repeat 中的当前项目

javascript - 如何使用javascript显示提交时的所有错误

javascript - 如何使用 html 或 javascript 将光标样式设置为圆圈