TypeScript——实战1

Timer.ts文件

module Time {
    export class Test {
        element: HTMLElement;
        span: HTMLElement;
        timer: number;

        constructor (e:HTMLElement) {
            this.element = e;
            this.element.innerHTML = '现在的时间是：';
            this.span = document.createElement('span');
            this.element.appendChild(this.span);
            this.span.innerHTML = new Date().toTimeString();
        }

        start() {
            this.timer = setInterval(() => this.span.innerHTML = new Date().toTimeString())；
        }

        end() {
            clearInterval(this.timer);
        }
    }
}

JSTimer.js文件

var div = document.createElement("div");
document.body.appendChild(div);
var obj = new Time.Test(div);
// 创建开始按钮，并绑定事件
var start_button = document.createElement('button');
start_button.innerHTML = 'start';
start_button.onclick = function () {
    obj.start();
}
document.body.appendChild(start_button);

// 创建停止按钮，并绑定事件
var stop_button = document.createElement('button');
stop_button.innerHTML = 'stop';
stop_button.onclick = function () {
    obj.stop();
}
document.body.appendChild(stop_button);

time.html文件

注意：编写的是 Timer.ts 引入的是编译之后的 Timer.js

直接运行我们可以看到

图1

点击 start 按钮 每个 500毫秒 更新一次时间，点击 stop 按钮 停止更新时间