connectseekers.com

Thursday, 5 June 2014

Digital Clock in Asp.Net in C#

6/05/2014 - By Pranav Singh 0

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.


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

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Get Updates

Subscribe to our e-mail newsletter to receive updates.

Share This Post

0 comments:

Please let me know your view

Free Ebooks


About Us

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Contact Us

For writing article in this website please send request by your

GMAIL ID: dotnetpools@gmail.com
Email Id : contact@aspdotnet-pools.com

Bugs and Suggestions

As we all know that this website is for sharing knowledge and providing proper solution. So while reading the article is you find any bug or if you have any suggestion please mail us at contact@aspdotnet-pools.com.

Partners


Top jQuery Plugins

Global Classified : Connectseekers.com
© 2014
back to top