整个例子实现的是再 Timer.ts 中定义一个 module ，然后在 JSTimer.js 中引用并实现计时器的效果

源码

  • Timer.ts ``` //做一个简单的计时器 module Time{ export class Test{
    1.   element:HTMLElement;
    2.   span:HTMLElement;
    3.   timer:number;
    4.   constructor(e:HTMLElement){
    5.       this.element = e;
    6.       this.element.innerHTML = '现在时间是：';
    7.       this.span = document.createElement('span');
    8.       this.element.appendChild(this.span);
    9.       this.span.innerHTML = new Date().toTimeString();
    10.   }
    11.   start(){
    12.       this.timer = setInterval(()=>this.span.innerHTML = new Date().toTimeString(),500);
    13.   }
    14.   stop(){
    15.       clearInterval(this.timer);
    16.   }
    } }
  2. - JSTimer.js

//用这个 js 文件引用 Timer.ts 中创建的 Time 模块

//创建一个 div var div = document.createElement(‘div’); document.body.appendChild(div); //引用模块中声明的 Test 类并传入 div 参数 var obj = new Time.Test(div); //创建一个点击操作的开始按钮 var startButton = document.createElement(‘button’); startButton.innerHTML = ‘start’; startButton.onclick = function() { obj.start(); }; document.body.appendChild(startButton); //创建一个点击操作的结束按钮 var endButton = document.createElement(‘button’); endButton.innerHTML = ‘stop’; endButton.onclick = function() { obj.stop(); }; document.body.appendChild(endButton);

  2. - HTML

<!DOCTYPE html>

```

  • 浏览器效果图

Animation23.gif