<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Styles/TimeClock.css" rel="stylesheet" type="text/css"></link>
<script src="Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
// Create two variable with the names of the months and days in an array
var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
// Create a newDate() object
var newDate = new Date();
// Extract the current date from Date object
newDate.setDate(newDate.getDate());
// Output the day, date, month and year
$('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());
setInterval(function () {
// Create a newDate() object and extract the seconds of the current time on the visitor's
var seconds = new Date().getSeconds();
// Add a leading zero to seconds value
$("#sec").html((seconds < 10 ? "0" : "") + seconds);
}, 1000);
setInterval(function () {
// Create a newDate() object and extract the minutes of the current time on the visitor's
var minutes = new Date().getMinutes();
// Add a leading zero to the minutes value
$("#min").html((minutes < 10 ? "0" : "") + minutes);
}, 1000);
setInterval(function () {
// Create a newDate() object and extract the hours of the current time on the visitor's
var hours = new Date().getHours();
// Add a leading zero to the hours value
$("#hours").html((hours < 10 ? "0" : "") + hours);
}, 1000);
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="clock">
<div id="Date">
</div>
<ul>
<li id="hours"></li>
<li class="point">:</li>
<li id="min"></li>
<li class="point">:</li>
<li id="sec"></li>
</ul>
</div>
</form>
</body>
</html>
</div>
css code:
body {
}
.clock
{
margin-left:950px;
margin-right:50px;
width: 350px;
padding: 10px;
border: 1px solid #333;
color: #fff;
background-color:Black;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
#Date {
font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
font-size: 25px;
text-align: center;
text-shadow: 0 0 4px #00c6ff;
}
ul {
width: 300px;
margin: 0 auto;
padding: 0px;
list-style: none;
text-align: center;
}
ul li {
display: inline;
font-size: 2em;
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;
}
No comments:
Post a Comment