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 disable or Enable submit button after validation
- Enable Disable Submit Button using jQuery
- Check Uncheck all asp.net CheckBox in asp.net using jQuery
- Example of jQuery Validate on Radiobuttonlist in Asp.Net using C#
- Limit Number of Characters in a TextArea using jQuery
- Limitation of Characters in Textbox or TextArea in asp.net using jquery:
- Example jQuery Validate on CheckBoxList using C#
- Check Uncheck all html CheckBox controls using jQuery:
- fill data into Dropdown list by using Jquery
- Validate ASP.Net RadioButtonList using JavaScript Example
- Example of jQuery Validate on Radiobuttonlist in Asp.Net using C#
- Example jQuery Validate on CheckBoxList using C#
- Asp.net CheckBoxList using jQuery.
- Cropping image using jQuery in asp.net
- Displaying the textbox value in javascript Messagebox
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:
 |
| Clock with jQuery & CSS3 |
Other Asp.net Related Post:
- javascript checkbox example onclick,
- checkbox validation using javascript,
- checkbox using javascript,
- checkbox validation using javascript in html,
- how to uncheck checkbox using javascript,
- check checkbox using javascript,
- enable checkbox using javascript
- create javascript array list.
- access literal control using javascript.
- literal control
- display elements on button clicked.
- hide radio buttons in javascript on.
- show and hide div by javascript.
- Asp checkboxlist control demo:
- Checkboxlist in asp.net(control example)
- Asp checkboxlist Example using C#.
- Limit Number of Characters in a TextArea using jQuery
- Get selected radio button values using JQuery
- How do you do html text encodes using JavaScript
- jquery disable or Enable submit button after validation
- Enable Disable Submit Button using jQuery
Comments
Post a Comment