Html5网页时钟，动画版

本栏首页分类：菜单导航层和布局背景特效 CSS相关文本链接表格相关日期时间图片特效页面综合广告代码表单及按钮计算转换游戏娱乐其它

Html5网页时钟，动画版

标签：HTML5 网页时钟　时间：2012-04-26　已阅读：
Html5网页时钟，动画版，请使用ie9及火狐或Chrome浏览器，IE8及以下版本将会看不到效果或出错。希望通过本实例让大家了解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">
     
<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('/jscss/demoimg/201204/clockbg.png');
left: 50%;
margin: 5em 0 0 -189px;
}
#clock div {
position: absolute;
}
#clock img[src*='second'] {
-webkit-transition: -webkit-transform 600000s linear;
-moz-transition: -moz-transform 600000s linear;
-o-transition: -o-transform 600000s linear;
-ms-transition: -ms-transform 600000s linear;
transition: transform 600000s linear;
}
#clock:target img[src*='second'] {
-webkit-transform: rotate(3600000deg);
-moz-transform: rotate(3600000deg);
-o-transform: rotate(3600000deg);
-ms-transform: rotate(3600000deg);
-transform: rotate(3600000deg);
}
#clock img[src*='minute'] {
-webkit-transition: -webkit-transform 360000s linear;
-moz-transition: -moz-transform 360000s linear;
-o-transition: -o-transform 360000s linear;
-ms-transition: -ms-transform 360000s linear;
transition: transform 360000s linear;
}
#clock:target img[src*='minute'] {
-webkit-transform: rotate(36000deg);
-moz-transform: rotate(36000deg);
-o-transform: rotate(36000deg);
-ms-transform: rotate(36000deg);
transform: rotate(36000deg);
}
#clock img[src*='hour'] {
-webkit-transition: -webkit-transform 216000s linear;
-moz-transition: -moz-transform 216000s linear;
-o-transition: -o-transform 216000s linear;
-ms-transition: -ms-transform 216000s linear;
transition: transform 216000s linear;
}
#clock:target img[src*='hour'] {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
</style>
</head>
<body class="experiment">
<div id="wrapper">
<div id="experiment">
       <div id="clock">
        <div id="hour"><img src="/jscss/demoimg/201204/2012031317105412.png" alt=""></div>
        <div id="minute"><img src="/jscss/demoimg/201204/2012031317113418.png" alt=""></div>
        <div id="second"><img src="/jscss/demoimg/201204/385052/2012031317114532.png" alt=""></div>
    </div>
</div>
            
</div>
<script src="/ajaxjs/jquery-1.6.2.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>

Html5网页时钟，动画版

本类推荐代码

本类阅读排行

最新源码下载