Asp.net Digital Clock with jQuery & CSS3

-

How to Make a Digital Clock with jQuery & CSS for display time:



In this post we learn how to make a clock by java script in asp.net web application. Some time in many web side we see they make clock on page for display time. Many online examinations web application use this as only showing time or as condone display. When we work on my own online examination web site then we use this on online text page for display time to student. And it’s very nice.

Jqury Related Other Post:



Jquery function,Clock using CSS3 and jQuery:


<script type="text/javascript">
        $(document).ready(function ()         {
            setInterval(function ()
            {
                var seconds = new Date().getSeconds();
                var sdegree = seconds * 6;
                var srotate = "rotate(" + sdegree + "deg)";
                $("#sec").css({ "-moz-transform": srotate, "-webkit-transform": srotate });
            }, 1000);
            setInterval(function ()
            {
                var hours = new Date().getHours();
                var mins = new Date().getMinutes();
                var hdegree = hours * 30 + (mins / 2);
                var hrotate = "rotate(" + hdegree + "deg)";
                $("#hour").css({ "-moz-transform": hrotate, "-webkit-transform": hrotate });

            }, 1000);
            setInterval(function ()
             {
                var mins = new Date().getMinutes();
                var mdegree = mins * 6;
                var mrotate = "rotate(" + mdegree + "deg)";
                $("#min").css({ "-moz-transform": mrotate, "-webkit-transform": mrotate });
            }, 1000);
        });    
    </script> 

Script for Clock with by css:


  #clock
             {
              position: relative;
              width: 600px;
              height: 600px;
              margin: 20px auto 0 auto;
              background: url(images/clockface.jpg);
              top: 1px;
              left: 0px;
        }   
   #sec, #min, #hour
             {
              position: absolute;
              width: 20px;
              height: 600px;
              top: 0px;
              left: 285px;
              }  

Jquery and css clock on web page code :


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="css_clock.aspx.cs" Inherits="css_clock" %>

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS3/jQuery Clock demo</title>
    <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
        }
        #clock
        {
            position: relative;
            width: 600px;
            height: 600px;
            margin: 20px auto 0 auto;
            background: url(images/clockface.jpg);
            list-style: none;
        }
        #sec, #min, #hour
        {
            position: absolute;
            width: 30px;
            height: 600px;
            top: 0px;
            left: 285px;
        }
        #sec
        {
            background: url(images/sechand.png);
            z-index: 3;
        }
        #min
        {
            background: url(images/minhand.png);
            z-index: 2;
        }
        #hour
        {
            background: url(images/hourhand.png);
            z-index: 1;
        }
        p
        {
            text-align: center;
            padding: 10px 0 0 0;
        }
    </style>
    <script type="text/javascript">

        $(document).ready(function () {

            setInterval(function () {
                var seconds = new Date().getSeconds();
                var sdegree = seconds * 6;
                var srotate = "rotate(" + sdegree + "deg)";

                $("#sec").css({ "-moz-transform": srotate, "-webkit-transform": srotate });

            }, 1000);


            setInterval(function () {
                var hours = new Date().getHours();
                var mins = new Date().getMinutes();
                var hdegree = hours * 30 + (mins / 2);
                var hrotate = "rotate(" + hdegree + "deg)";

                $("#hour").css({ "-moz-transform": hrotate, "-webkit-transform": hrotate });

            }, 1000);


            setInterval(function () {
                var mins = new Date().getMinutes();
                var mdegree = mins * 6;
                var mrotate = "rotate(" + mdegree + "deg)";

                $("#min").css({ "-moz-transform": mrotate, "-webkit-transform": mrotate });

            }, 1000);

        });
   
    </script>
</head>



Clock in asp.net with jQuery and CSS Example:


Asp.net Digital Clock with jQuery & CSS3
 Clock with jQuery & CSS3

Other Asp.net Related Post:

Comments

Post a Comment