html5钟表效果

看见有钟表的效果不错：
 !DOCTYPE>
 htML lang="en" id="paulrhayes-com" class="js wf-swingdancer1swingdancer2-n5-active wf-active">
 
head>   
 meta http-equiv="Content-type" content="text/html; charset=utf-8">
 link rel="stylesheet" href="css/experiment.css"type="text/css">
 link rel="stylesheet" href="css/experiment.css"type="text/css">
 !--[if lt IE 9]> script src="http://html5shiv.GOOGLEcode.COM/svn/trunk/html5.js"> /script> ![endif]-->    
 style type="text/css">
 body.experiment {
 background: #fff;
 }
 
 .start {
 text-align: center;
 font-Size: 2em;
 font-weight: bold;
 margin: 5em;
 }
 
#clock {
 posITion: relative;
 width: 378px;
 height: 378px;
 background-image: url('http://pic002.cnblogs.com/images/2012/385052/2012031316573623.png');
 left: 50%;
 margin: 5em 0 0 -189px;
 }
 
#clock p {
 position: absolute;
 }
 /style>
 /head>
 body class="experiment">
 
p id="wrapper">
     header id="header">
         aside class="tweetThis">
             a href="http://www.cnbLOGs.com/wangyunbing/" class="twitter-share-button" data-text="CSS3 Analogue Clock" data-count="horizontal" data-via="fofr"> 滴水成兵/a>
         /aside>
     /header>
 
p id="experiment">
   
     p id="clock">
         p id="hour"> img src=http://up.2cto.com/2012/0314/20120314095948127.png" alt=""> /p>
         p id="minute"> img src=http://up.2cto.com/2012/0314/20120314095948432.png" alt=""> /p>
         p id="second"> img src=http://up.2cto.com/2012/0314/20120314095948465.png" alt=""> /p>
     /p>
 /p>
 
          
 /p>
 
script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> /script> script type="text/javascript">

$(function(){
   
    VAR PRops = 'transform webkitTransform MozTransform OTransform msTransform'.split(' '),
        prop,
        el = document.createElement('p');
   
    for(var i = 0, l = props.length; i l; i++) {
        if(typeof el.style[props[i]] !== "undefined") {
            prop = props[i];
            break;
        }
    }
    startClock();
    setInterval(function(){ startClock(); } ,1000)
    function startClock() {
        var angle = 360/60,
            date = new Date(),
            hour = (function() {
                var h = date.getHours();
                if(h > 12) {
                    h = h - 12;
                }
                return h
            } )(),
            minute = date.getMinutes(),
            second = date.getSeconds(),
            hourAngle = (360/12) * hour + (360/(12*60)) * minute;
       
        if(prop) {
            $('#minute')[0].style[prop] = 'rotate('+angle * minute+'deg)';
            $('#second')[0].style[prop] = 'rotate('+angle * second+'deg)';
            $('#hour')[0].style[prop] = 'rotate('+hourAngle+'deg)';
        }
    }
    document.title = date
} );
/script>

/body>
/html>

看见有钟表的效果不错：
 !DOCTYPE>
 html lang="en" id="paulrhayes-com" class="js wf-swingdancer1swingdancer2-n5-active wf-active">
 
head>   
 meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 link rel="stylesheet" href="css/experiment.css"type="text/css">
 link rel="stylesheet" href="css/experiment.css"type="text/css">
 !--[if lt IE 9]> script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> /script> ![endif]-->    
 style type="text/css">
 body.experiment {
 background: #fff;
 }
 
 .start {
 text-align: center;
 font-size: 2em;
 font-weight: bold;
 margin: 5em;
 }
 
#clock {
 position: relative;
 width: 378px;
 height: 378px;
 background-image: url('http://pic002.cnblogs.com/images/2012/385052/2012031316573623.png');
 left: 50%;
 margin: 5em 0 0 -189px;
 }
 
#clock p {
 position: absolute;
 }
 /style>
 /head>
 body class="experiment">
 
p id="wrapper">
     header id="header">
         aside class="tweetThis">
             a href="http://www.cnblogs.com/wangyunbing/" class="twitter-share-button" data-text="CSS3 Analogue Clock" data-count="horizontal" data-via="fofr"> 滴水成兵/a>
         /aside>
     /header>
 
p id="experiment">
   
     p id="clock">
         p id="hour"> img src=http://up.2cto.com/2012/0314/20120314095948127.png" alt=""> /p>
         p id="minute"> img src=http://up.2cto.com/2012/0314/20120314095948432.png" alt=""> /p>
         p id="second"> img src=http://up.2cto.com/2012/0314/20120314095948465.png" alt=""> /p>
     /p>
 /p>
 
          
 /p>
 
script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> /script> script type="text/javascript">

$(function(){
   
    var props = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' '),
        prop,
        el = document.createElement('p');
   
    for(var i = 0, l = props.length; i l; i++) {
        if(typeof el.style[props[i]] !== "undefined") {
            prop = props[i];
            break;
        }
    }
    startClock();
    setInterval(function(){ startClock(); } ,1000)
    function startClock() {
        var angle = 360/60,
            date = new Date(),
            hour = (function() {
                var h = date.getHours();
                if(h > 12) {
                    h = h - 12;
                }
                return h
            } )(),
            minute = date.getMinutes(),
            second = date.getSeconds(),
            hourAngle = (360/12) * hour + (360/(12*60)) * minute;
       
        if(prop) {
            $('#minute')[0].style[prop] = 'rotate('+angle * minute+'deg)';
            $('#second')[0].style[prop] = 'rotate('+angle * second+'deg)';
            $('#hour')[0].style[prop] = 'rotate('+hourAngle+'deg)';
        }
    }
    document.title = date
} );
/script>

/body>
/html>

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！