In this article I will show you how you can create a digital
clock in asp.net. I will show you how you can develop a clock in asp.net
without using jQuey, Javascript. In this I have used Ajax UpdatePanel and timercontrol to build a cool digital clock for your asp.net application.
In my previous article I have shown you how you can perform Asynchronous
Page Loading In Asp.net Using UpdatePanel and Timer Control | Simple
Asynchronous Page Load in ASP.NET.
Some of my asp.net articles are as follows: Email
Address Validation in Javascript in Asp.Net, Binding
Gridview By Access DataBase Using C#.Net in Asp.Net, How
to style input and submit button with CSS , Asp.net, How
to Minimize an Application to the Taskbar Tray in C#.Net | System Tray
Application C#, Free
jQuery Spell Checker Plugins For Asp.Net.
So for this article first you needed to create a new asp.net
application in this add the below code.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DigitalClock.aspx.cs" Inherits="ProjectDemo_Asp.et.DigitalClock"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Digital
Clock</title>
<style type="text/css">
body{
background:#202020;
font:bold 12px Arial, Helvetica, sans-serif;
margin:0;
padding:0;
color:#bbbbbb;
}
a {
text-decoration:none;
color:#00c6ff;
}
h1 {
font: 4em normal Arial, Helvetica, sans-serif;
padding:
20px; margin: 0;
text-align:center;
}
h1 small{
font: 0.2em normal Arial, Helvetica, sans-serif;
text-transform:uppercase; letter-spacing:
0.2em; line-height:
5em;
display:
block;
}
h2 {
font-weight:700;
color:#bbb;
font-size:20px;
}
h2, p {
margin-bottom:10px;
}
@font-face {
font-family:
'BebasNeueRegular';
src: url('BebasNeue-webfont.eot');
src: url('BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
url('BebasNeue-webfont.woff')
format('woff'),
url('BebasNeue-webfont.ttf')
format('truetype'),
url('BebasNeue-webfont.svg#BebasNeueRegular')
format('svg');
font-weight:
normal;
font-style:
normal;
}
ul { width:550px; margin:0 auto; padding:0px; list-style:none; text-align:center; border:1px solid #333;}
ul li { display:inline; font-size:8em; text-align:center; font-family:'BebasNeueRegular',
Arial, Helvetica,
sans-serif; text-shadow:0 0 5px #00c6ff; }
#point { position:relative; -moz-animation:mymove 1s ease infinite; -webkit-animation:mymove
1s ease infinite; padding-left:10px; padding-right:10px; }
@-webkit-keyframes mymove
{
0%
{opacity:1.0; text-shadow:0 0 20px #00c6ff;}
50%
{opacity:0; text-shadow:none; }
100%
{opacity:1.0; text-shadow:0 0 20px #00c6ff; }
}
@-moz-keyframes mymove
{
0%
{opacity:1.0; text-shadow:0 0 20px #00c6ff;}
50%
{opacity:0; text-shadow:none; }
100%
{opacity:1.0; text-shadow:0 0 20px #00c6ff; }
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Timer ID="Timer1" runat="server" Interval="1000" OnTick="Timer1_Tick">
</asp:Timer>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<ul>
<li id="hours" runat="server"></li>
<li id="point">:</li>
<li id="min" runat="server"></li>
<li id="point">:</li>
<li id="sec" runat="server"></li>
</ul>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
</asp:UpdatePanel>
</form>
</body>
</html>
|
In above code I have added UpdatePanel, Timer control . Now
for displaying the minute, hour and second use the below code.
For changing the display size of the clock just needed to
make the changes in the below mention style sheet code.
ul li { display:inline; font-size:8em;
text-align:center;
font-family:'BebasNeueRegular',
Arial, Helvetica,
sans-serif; text-shadow:0 0 5px #00c6ff; }
|
Just change the font size highlighted in the above code.
C#.Net
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace ProjectDemo_Asp.et
{
public partial class DigitalClock : System.Web.UI.Page
{
protected
void Page_Load(object
sender, EventArgs e)
{
hours.InnerHtml = DateTime.Now.Hour < 10 ? "0" + DateTime.Now.Hour.ToString()
: DateTime.Now.Hour.ToString();
min.InnerHtml = DateTime.Now.Minute < 10 ? "0" + DateTime.Now.Minute.ToString()
: DateTime.Now.Minute.ToString();
sec.InnerHtml = DateTime.Now.Second < 10 ? "0" + DateTime.Now.Second.ToString()
: DateTime.Now.Second.ToString();
}
protected
void Timer1_Tick(object
sender, EventArgs e)
{
hours.InnerHtml = DateTime.Now.Hour < 10 ? "0" + DateTime.Now.Hour.ToString()
: DateTime.Now.Hour.ToString();
min.InnerHtml = DateTime.Now.Minute < 10 ? "0" + DateTime.Now.Minute.ToString()
: DateTime.Now.Minute.ToString();
sec.InnerHtml = DateTime.Now.Second < 10 ? "0" + DateTime.Now.Second.ToString()
: DateTime.Now.Second.ToString();
}
}
}
|
VB.Net
Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
Namespace ProjectDemo_Asp.et
Partial Public Class DigitalClock
Inherits
System.Web.UI.Page
Protected
Sub Page_Load(ByVal
sender As Object,
ByVal e As
EventArgs)
hours.InnerHtml = If(DateTime.Now.Hour < 10, "0" + DateTime.Now.Hour.ToString(),
DateTime.Now.Hour.ToString())
min.InnerHtml = If(DateTime.Now.Minute < 10, "0" + DateTime.Now.Minute.ToString(),
DateTime.Now.Minute.ToString())
sec.InnerHtml = If(DateTime.Now.Second < 10, "0" + DateTime.Now.Second.ToString(),
DateTime.Now.Second.ToString())
End Sub
Protected
Sub Timer1_Tick(ByVal
sender As Object,
ByVal e As
EventArgs)
hours.InnerHtml = If(DateTime.Now.Hour < 10, "0" + DateTime.Now.Hour.ToString(),
DateTime.Now.Hour.ToString())
min.InnerHtml = If(DateTime.Now.Minute < 10, "0" + DateTime.Now.Minute.ToString(),
DateTime.Now.Minute.ToString())
sec.InnerHtml = If(DateTime.Now.Second < 10, "0" + DateTime.Now.Second.ToString(),
DateTime.Now.Second.ToString())
End Sub
End Class
End Namespace
|
In above code for always displaying two digit I have put the
condition if time value is less than 10 then a 0 will be append otherwise it
will take the value.
About the Author
0 comments:
Please let me know your view