今天我们来写一个非常简单的网页时钟。

TypeScript部分

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);
        }
    }
}

其实也可以对比一下编译后的JavaScript文件。

var Time;
(function (Time) {
    var Test = /** @class */ (function () {
        function Test(e) {
            this.element = e;
            this.element.innerHTML = "现在时间是:";
            this.span = document.createElement("span");
            this.element.appendChild(this.span);
            this.span.innerHTML = new Date().toTimeString();
        }
        Test.prototype.start = function () {
            var _this = this;
            this.timer = setInterval(function () { return _this.span.innerHTML = new Date().toTimeString(); }, 500);
        };
        Test.prototype.stop = function () {
            clearInterval(this.timer);
        };
        return Test;
    }());
    Time.Test = Test;
})(Time || (Time = {}));

很容易发现的是,JavaScript里的封装等同于TypeScript里的Module,其中的start,stop方法也通过原型prototype表示了出来。

JavaScript部分

emmm这一部分是来实现开始和暂停按钮的功能。(并没有什么花里胡哨的地方)

var div = document.createElement("div");
document.body.appendChild(div);

var obj = new Time.Test(div);
var button = document.createElement("button");
button.innerHTML = "start";
button.onclick = function () {
    obj.start();
}
document.body.appendChild(button);

var buttons = document.createElement("button");
buttons.innerHTML = "stop";
buttons.onclick = function(){
    obj.stop();
}

document.body.appendChild(buttons);

Html部分

(就是把两个js文件引用一下咯)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Timer</title>

</head>
<body>
    <script src="balabala.js"></script>
    <script src="balabala.js"></script>
</body>
</html>

实现效果

难道你你你不会Copy到你的ide里实现一下嘛(生气)……

[toc]


Melancholy.