整个例子实现的是再 Timer.ts 中定义一个 module ，然后在 JSTimer.js 中引用并实现计时器的效果
源码
- 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(),500);
}
stop(){
clearInterval(this.timer);
}
}
}
- 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);
- HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TypeScript 模块-modules 应用</title>
</head>
<body>
<script type="text/javascript" src="Timer.js"></script>
<script type="text/javascript" src="JSTimer.js"></script>
</body>
</html>
- 浏览器效果图
Animation23.gif
