Animated Digital Clock Using Web Application In TypeScript

Introduction

This article shows an animated digital clock using CSS in a web application with TypeScript. In this example, we call getHours(), getMinutes() and getSeconds() of the Date() class instance (current-time).

Step 1

Open Visual Studio 2012 and click "File" -> "New" -> "Project...". A window is opened. In this window, click "HTML Application for TypeScript" under Visual C#.

Give your application the name "Animated_Digital_Clock" and then click ok.

Step 2

After that the project has been created; a new window is opened on the right side. This window is called the Solution Explorer. The Solution Explorer contains the ts file, js file, and CSS file and the aspx page.

Coding

app.ts

class Animated_Clock {
Time() {
var currentTime = new Date();
var diem = "AM";
var h = currentTime.getHours();
var m = currentTime.getMinutes();
var s = currentTime.getSeconds();
setTimeout(() => {
this.Time();
}, 1000);
if (h == 0) {
h = 12;
}
elseif(h > 12) {
h = h - 12;
diem = "PM";
}
if (h < 10) {
h = 0 + h;
}
if (m < 10) {
m = 0 + m;
}
if (s < 10) {
s = 0 + s;
}
var myClock = document.getElementById('ClockDisplay');
myClock.textContent = h + ":" + m + ":" + s + " " + diem;
myClock.innerText = h + ":" + m + ":" + s + " " + diem;
}
}
window.onload = () => {
var objTime = new Animated_Clock();
objTime.Time();
};

Digital_Clock.aspx

<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="Digital_Clock.aspx.cs"
Inherits="Animated_Digital_Clock.Digital_Clock"%>
<!DOCTYPEhtml>
<html
xmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title></title>
<scriptsrc="app.js">
</script>
<styletype="text/css">
.clockStyle
{
background-color:#000;
border:#9992pxinset;
padding:6px;
color:#0FF;
font-family:"Arial Black",Gadget,sans-serif;
font-size:16px;
font-weight:bold;
letter-spacing:2px;
display:inline;
}
</style>
</head>
<body>
<formid="form1"runat="server">
<div>
<asp:LabelID="Label1"runat="server"Text="Animated Digital Clock in TypeScript"ForeColor="#006600"Font-Size="X-Large"
Font-Italic="True"Font-Bold="True">
</asp:Label>
<br/>
</div>
</form>
<p>
<divid="ClockDisplay"class="clockStyle">
</div>
</body>
</html>

app.js

var Animated_Clock = (function() {
function Animated_Clock() {}
Animated_Clock.prototype.Time = function() {
var _this = this;
var currentTime = new Date();
var diem = "AM";
var h = currentTime.getHours();
var m = currentTime.getMinutes();
var s = currentTime.getSeconds();
setTimeout(function() {
_this.Time();
}, 1000);
if (h == 0) {
h = 12;
} else {
if (h > 12) {
h = h - 12;
diem = "PM";
}
}
if (h < 10) {
h = 0 + h;
}
if (m < 10) {
m = 0 + m;
}
if (s < 10) {
s = 0 + s;
}
var myClock = document.getElementById('ClockDisplay');
myClock.textContent = h + ":" + m + ":" + s + " " + diem;
myClock.innerText = h + ":" + m + ":" + s + " " + diem;
};
return Animated_Clock;
})();
window.onload = function() {
var objTime = new Animated_Clock();
objTime.Time();
};

Output

For more information, download the attached sample application.