Post
Ask Question

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
  1. class Animated_Clock {  
  2.  Time() {  
  3.   var currentTime = new Date();  
  4.   var diem = "AM";  
  5.   var h = currentTime.getHours();  
  6.   var m = currentTime.getMinutes();  
  7.   var s = currentTime.getSeconds();  
  8.   setTimeout(() => {  
  9.    this.Time();  
  10.   }, 1000);  
  11.   if (h == 0) {  
  12.    h = 12;  
  13.   }  
  14.   elseif(h > 12) {  
  15.    h = h - 12;  
  16.    diem = "PM";  
  17.   }  
  18.   if (h < 10) {  
  19.    h = 0 + h;  
  20.   }  
  21.   if (m < 10) {  
  22.    m = 0 + m;  
  23.   }  
  24.   if (s < 10) {  
  25.    s = 0 + s;  
  26.   }  
  27.   var myClock = document.getElementById('ClockDisplay');  
  28.   myClock.textContent = h + ":" + m + ":" + s + " " + diem;  
  29.   myClock.innerText = h + ":" + m + ":" + s + " " + diem;  
  30.  }  
  31. }  
  32. window.onload = () => {  
  33.  var objTime = new Animated_Clock();  
  34.  objTime.Time();  
  35. };  
Digital_Clock.aspx
  1. <%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="Digital_Clock.aspx.cs"  
  2. Inherits="Animated_Digital_Clock.Digital_Clock"%>  
  3. <!DOCTYPEhtml>  
  4. <html  
  5.     xmlns="http://www.w3.org/1999/xhtml">  
  6.     <headrunat="server">  
  7.         <title></title>  
  8.         <scriptsrc="app.js">  
  9.         </script>  
  10.         <styletype="text/css">  
  11.     .clockStyle  
  12.     {  
  13.     background-color:#000;  
  14.     border:#9992pxinset;  
  15.     padding:6px;  
  16.     color:#0FF;  
  17.     font-family:"Arial Black",Gadget,sans-serif;  
  18.         font-size:16px;  
  19.         font-weight:bold;  
  20.     letter-spacing:2px;  
  21.     display:inline;  
  22.     }    
  23.         </style>  
  24.     </head>  
  25.     <body>  
  26.         <formid="form1"runat="server">  
  27.             <div>  
  28.                 <asp:LabelID="Label1"runat="server"Text="Animated Digital Clock in TypeScript"ForeColor="#006600"Font-Size="X-Large"  
  29.        Font-Italic="True"Font-Bold="True">  
  30.                 </asp:Label>  
  31.                 <br/>  
  32.             </div>  
  33.         </form>  
  34.         <p>  
  35.             <divid="ClockDisplay"class="clockStyle">  
  36.             </div>  
  37.         </body>  
  38.     </html>  
app.js
  1. var Animated_Clock = (function() {  
  2.  function Animated_Clock() {}  
  3.  Animated_Clock.prototype.Time = function() {  
  4.   var _this = this;  
  5.   var currentTime = new Date();  
  6.   var diem = "AM";  
  7.   var h = currentTime.getHours();  
  8.   var m = currentTime.getMinutes();  
  9.   var s = currentTime.getSeconds();  
  10.   setTimeout(function() {  
  11.    _this.Time();  
  12.   }, 1000);  
  13.   if (h == 0) {  
  14.    h = 12;  
  15.   } else {  
  16.    if (h > 12) {  
  17.     h = h - 12;  
  18.     diem = "PM";  
  19.    }  
  20.   }  
  21.   if (h < 10) {  
  22.    h = 0 + h;  
  23.   }  
  24.   if (m < 10) {  
  25.    m = 0 + m;  
  26.   }  
  27.   if (s < 10) {  
  28.    s = 0 + s;  
  29.   }  
  30.   var myClock = document.getElementById('ClockDisplay');  
  31.   myClock.textContent = h + ":" + m + ":" + s + " " + diem;  
  32.   myClock.innerText = h + ":" + m + ":" + s + " " + diem;  
  33.  };  
  34.  return Animated_Clock;  
  35. })();  
  36. window.onload = function() {  
  37.  var objTime = new Animated_Clock();  
  38.  objTime.Time();  
  39. };  
Output
 
Animation4.gif
 
For more information, download the attached sample application.


Similar Articles