HTML5小案例
瀏覽量：2634
看見有鐘表的效果不錯：
<!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"> <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 div { position: absolute; } </style> </head> <body class="experiment"> <div 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> <div id="experiment"> <div id="clock"> <div id="hour"><img src="http://pic002.cnblogs.com /images/2012/385052/2012031317105412.png" alt=""></div> <div id="minute"><img src="http://pic002.cnblogs.com /images/2012/385052/2012031317113418.png" alt=""></div> <div id="second"><img src="http://pic002.cnblogs.com /images/2012/385052/2012031317114532.png" alt=""></div> </div> </div> </div> <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('div'); 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>
軟件開發，CRM定制，找易勢科技，易勢科技最專業。