Last active
December 16, 2017 21:58
-
-
Save konstantinos-tsatsarounos/8f89e07139bc3dacea371e3cf2bc556c to your computer and use it in GitHub Desktop.
Simple Clock With Typescript
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Creates a basic clock and binds it to a specified element | |
| */ | |
| class Clock { | |
| timeTemplate: string = "00:00:00"; | |
| clockHandler: number; | |
| target: HTMLElement; | |
| /** | |
| * @return string, time | |
| */ | |
| getTime() { | |
| var date = new Date(); | |
| return [date.getHours(), date.getMinutes(), date.getSeconds()] | |
| .map(current => current >= 10 ? current : "0" + current).join(":"); | |
| } | |
| /** | |
| * Starts the clock | |
| */ | |
| start(): void { | |
| /* | |
| I use the bind method to specify the "this" for interval's callback, because | |
| interval runs on a seperate execution context, and so the keyword this, | |
| initialy refers to the window object. | |
| */ | |
| this.clockHandler = setInterval(function (parent) { | |
| this.target.innerHTML = this.getTime(); | |
| }.bind(this), 1000); | |
| } | |
| /** | |
| * Stops the clock by stoping the clock's interval | |
| */ | |
| stop(): void { | |
| clearInterval(this.clockHandler); | |
| } | |
| /** | |
| * Binds the Clock to specified element's content | |
| * @param elem | |
| */ | |
| bindTo(elem): void { | |
| this.target = elem; | |
| this.target.innerHTML = this.timeTemplate; | |
| } | |
| } | |
| (function (window, document) { | |
| var clock = new Clock(); | |
| clock.bindTo(document.getElementById("clock")); | |
| clock.start(); | |
| } (window, document)); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>TypeScript Clock</title> | |
| </head> | |
| <body> | |
| <h1>TypeScript Clock</h1> | |
| <hr /> | |
| <div id="clock"></div> | |
| <script src="clock.js"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment