jQuery实现HTML5时钟 -

兔兔and妞

浏览: 1724 次

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery实现HTML5时钟

博客分类：

jQuery技术应用

jQuery应用时钟演示

<!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>
<title>jQuery实现HTML5时钟-柯乐义</title><base target="_blank" />
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<style>
/* 柯乐义
* http://keleyi.com
*/
*
{
margin:0;
padding:0;
}
body
{
background:#f9f9f9;
color:#000;
font:15px Calibri, Arial, sans-serif;
text-shadow:1px 2px 1px #FFFFFF;
}
a,
a:visited
{
text-decoration:none;
outline:none;
color:#0000ff;
}
a:hover
{
text-decoration:underline;
color:#009900;
}
/*the footer*/
footer
{
background:#444 url("http://keleyi.com/image/a/im66vsri.png") repeat;
position:fixed;
width:100%;
height:70px;
bottom:0;
left:0;
color:#fff;
text-shadow:2px 2px #000;
-moz-box-shadow:5px 1px 10px #000;
-webkit-box-shadow:5px 1px 10px #000;
box-shadow:5px 1px 10px #000;
}
footer h1
{
font:25px/26px Acens;
font-weight:normal;
left:50%;
margin:0px 0 0 150px;
padding:25px 0;
position:relative;
width:400px;
}
footer a.orig,
a.orig:visited
{
background:url("http://keleyi.com/image/a/xihqij1u.png") no-repeat right top;
border:none;
text-decoration:none;
color:#FCFCFC;
font-size:14px;
height:70px;
left:50%;
line-height:50px;
margin:12px 0 0 -400px;
position:absolute;
top:0;
width:250px;
}
/*styling for the clock*/
#clock-keleyi-com
{
position: relative;
width: 600px;
height: 600px;
list-style: none;
margin: 20px auto;
background: url('http://keleyi.com/image/a/nejs3bnm.png') no-repeat center;

}
#seconds,
#minutes,
#hours
{
position: absolute;
width: 30px;
height: 580px;
left: 270px;
}
#date
{
text-shadow:1px 2px 1px #000;
position: absolute;
top: 365px;
color:#fff;
right: 140px;
font:30px/36px Acens;
font-weight:bold;
letter-spacing:3px;
}
#hours
{
background: url('http://keleyi.com/image/a/exs0erm9.png') no-repeat left;
z-index: 1000;
}
#minutes
{
background: url('http://keleyi.com/image/a/exs0erm9.png') no-repeat center;
width:25px;
z-index: 2000;
}

#seconds
{
background: url('http://keleyi.com/image/a/exs0erm9.png') no-repeat right;
z-index: 3000;
}
</style>
<script>
$(document).ready(function () {

//markup for the clock
var clock = [
'<ul id="clock-ke'+'leyi-com">',
'<li id="date"></li>',
'<li id="seconds"></li>',
'<li id="hours"></li>',
'<li id="minutes"></li>',
'</ul>'].join('');

//fadein the clock and append it to the body keleyi.com
$(clock).fadeIn().appendTo('body');

//an autoexecuting function that updates the clovk view every second
//you can also use setInterval (function Clock (){})();
(function Clock() {

//get the date and time
var date = new Date().getDate(), //get the current date
hours = new Date().getHours(), //get the current hour
minutes = new Date().getMinutes(); //get the current minute
seconds = new Date().getSeconds(), //get the current second

$("#date").html(date); //show the current date on the clock

var hrotate = hours * 30 + (minutes / 2);
//i.e 12 hours * 30 = 360 degrees

$("#hours").css({
'transform': 'rotate(' + hrotate + 'deg)',
'-moz-transform': 'rotate(' + hrotate + 'deg)',
'-webkit-transform': 'rotate(' + hrotate + 'deg)'
});

var mrotate = minutes * 6; //degrees to rotate the minute hand

$("#minutes").css({
'transform': 'rotate(' + mrotate + 'deg)',
'-moz-transform': 'rotate(' + mrotate + 'deg)',
'-webkit-transform': 'rotate(' + mrotate + 'deg)'
});

var srotate = seconds * 6; //for the rotation to reach 360 degrees
//i.e 60 seconds * 6 = 360 degrees.

$("#seconds").css({
'transform': 'rotate(' + srotate + 'deg)',
'-moz-transform': 'rotate(' + srotate + 'deg)',
'-webkit-transform': 'rotate(' + srotate + 'deg)'
});

//a call to the clock function after every 1000 miliseconds
setTimeout(Clock, 1000);
})();
}); </script>
</head>
<body>
<div style="width:800px;height:100px;margin:0px auto">[url=http://keleyi.com/a/bjac/ut3scn0n.htm]原文[/url] 请使用支持HTML5/CSS3的浏览器查看本页。本页地址：
[url=http://keleyi.com/keleyi/phtml/html5/17.htm]http://keleyi.com/keleyi/phtml/html5/17.htm[/url]</div>
</body>
</html>