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 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>
<htmlxmlns="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();
};
//@ sourceMappingURL=app.js.map
Output
![Animation4.gif]()
For more information, download the attached sample application.