zoukankan      html  css  js  c++  java
  • css+ js 实现圆环时钟

    <!DOCTYPE html>

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>多彩炫酷环形时钟效果</title>
    <style type="text/css">
    #fancyClock{
        margin:40px auto;
        height:200px;
        border:1px solid #111111;
        600px;
    }
    .clock{
        /* 时钟div */
        
        height:200px;
        200px;
        position:relative;
        overflow:hidden;
        float:left;
    }
     
    .clock .rotate{
        /* 两个旋转的div,每个都分为左右两部分 */
        position:absolute;
        200px;
        height:200px;
        top:0;
        left:0;
    }
     
    .rotate.right{
        display:none;
        z-index:11;
    }
     
    .clock .bg, .clock .front{
        100px;
        height:200px;
        
        position:absolute;
        top:0;
    }
     
    .clock .display{
        /* 小时,分钟,秒钟的显示 */
        position:absolute;
        200px;
        font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
        z-index:20;
        color:#F5F5F5;
        font-size:60px;
        text-align:center;
        top:55px;
        left:0;
         
        /* CSS3 文字阴影 */
        text-shadow:4px 4px 5px #333333;
    }
     
    /* 左半边部分 */
     
    .clock .bg.left{ left:0; }
     
    /* 每个不同颜色的背景图: */
    .orange .bg.left{ background:url(http://image.zhangxinxu.com/image/blog/201008/bg_orange.png) no-repeat left top; }
    .green .bg.left{ background:url(http://image.zhangxinxu.com/image/blog/201008/bg_green.png) no-repeat left top; }
    .blue .bg.left{ background:url(http://image.zhangxinxu.com/image/blog/201008/bg_blue.png) no-repeat left top; }
     
    /* 右边部分 */
    .clock .bg.right{ left:100px; }
     
    .orange .bg.right{ background:url(http://image.zhangxinxu.com/image/blog/201008/bg_orange.png) no-repeat right top; }
    .green .bg.right{ background:url(http://image.zhangxinxu.com/image/blog/201008/bg_green.png) no-repeat right top; }
    .blue .bg.right{ background:url(http://image.zhangxinxu.com/image/blog/201008/bg_blue.png) no-repeat right top; }
     
     
    .clock .front.left{
        left:0;
        z-index:10;
    }
     
    </style>
    </head>
     
    <body>
    <div id="fancyClock">
        <div class="orange clock">
            <div class="display" id="hours">00</div>
            <div class="front left"></div>
            <div class="rotate left" id="orangeRotateLeft">
                <div class="bg left"></div>
             </div>
            <div class="rotate right" id="orangeRotateRight">
                <div class="bg right"></div>
            </div>
        </div>
        <div class="blue clock">
            <div class="display" id="minuts">00</div>
            <div class="front left"></div>
            <div class="rotate left" id="blueRotateLeft">
                <div class="bg left"></div>
            </div>
            <div class="rotate right" id="blueRotateRight">
                <div class="bg right"></div>
            </div>
        </div>
        <div class="green clock">
            <div class="display" id="seconds">00</div>
            <div class="front left"></div>
            <div class="rotate left" id="greenRotateLeft">
                <div class="bg left"></div>
            </div>
            <div class="rotate right" id="greenRotateRight">
                <div class="bg right"></div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
    (function(){
        var $ = function(id){
            return document.getElementById(id);
        };
        var o = {  
            hour: $("hours"), //小时数值对象
            minu: $("minuts"), //分钟数值对象
            sec: $("seconds"), //秒钟数值对象
            orgl: $("orangeRotateLeft"), //黄色旋转左半区
            orgr: $("orangeRotateRight"), //黄色旋转右半区
            bluel: $("blueRotateLeft"), //蓝色旋转左半区
            bluer: $("blueRotateRight"), //蓝色旋转右半区
            sec: $("seconds"), //秒钟数值对象
            greenl: $("greenRotateLeft"), //绿色旋转左半区
            greenr: $("greenRotateRight") //绿色旋转右半区
        };
        var f = {
            css: function(o,key){
                return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];  
            },
            zero: function(n, top){
                n = parseInt(n, 10), top = top || "00";
                if(n > 0){
                    if(n <= 9){
                        n = "0" + n;   
                    }
                    return String(n);
                }else{
                    return top.toString(); 
                }
            },
            angle: function(v, total){
                var scale = v / total, offsetx = 0, offsety = 0, an;
                var angle = scale * 360; //当前角度值
                //IE矩阵角度值计算
                var m11 = Math.cos(Math.PI*2 / 360 * angle)
                var m21 = Math.sin(Math.PI*2 / 360 * angle);
                if(angle > 90){
                    an = angle - 90;
                }else{
                    an = angle;
                }
                offsety = offsetx = (200 - 200 * Math.sqrt(2) * Math.cos(Math.PI / 180 * Math.abs(an - 45))) / 2 ;
                return {
                    trans: "rotate("+angle+"deg)", 
                    ie: "progid:DXImageTransform.Microsoft.Matrix(M11="+m11+",M12=-"+m21+",M21="+m21+",M22="+m11+",SizingMethod='auto expand',FilterType='nearest neighbor')",
                    offset: {
                        x: offsetx,
                        y: offsety
                    }
                };
            },
            cartoon: function(l, r, v, part){
                var total = part * 2, angleV, anglePart;
                if(v <= part && v > 0){
                    angleV = f.angle(v, total);
                    l.style.display = "block";
                    l.style.filter = angleV.ie;
                    l.style.MozTransform = l.style.WebkitTransform = l.style.transform = angleV.trans;
                    r.style.display = "none";
                    //ie 旋转非居中旋转的修复
                    if(document.all){
                        l.style.left = angleV.offset.x + "px";
                        l.style.top = angleV.offset.y + "px";
                    }
                }else{
                    v = Math.abs(v - part);
                    angleV = f.angle(v, total);
                    anglePart = f.angle(part, total);
                    l.style.display = "block";
                    l.style.filter = anglePart.ie;
                    l.style.MozTransform = l.style.WebkitTransform = l.style.transform = anglePart.trans;
                    r.style.display = "block";
                    r.style.filter = angleV.ie;
                    r.style.MozTransform = r.style.WebkitTransform = r.style.transform = angleV.trans;
                    if(document.all){
                        r.style.left = angleV.offset.x + "px";
                        r.style.top = angleV.offset.x + "px";
                    }
                }
            },
            ui: function(){
                var mytime = new Date();
                var h = mytime.getHours(),  m = mytime.getMinutes(), s = mytime.getSeconds();
                o.hour.innerHTML = f.zero(h);
                o.minu.innerHTML = f.zero(m, 60);
                o.sec.innerHTML = f.zero(s, 60);
                f.cartoon(o.orgl, o.orgr, h, 12);
                f.cartoon(o.bluel, o.bluer, m, 30);
                f.cartoon(o.greenl, o.greenr, s, 30);
                setTimeout(f.ui, 1000);
            }
        }; 
        f.ui();
    })();
    </script>
    </body>
    </html>
     
  • 相关阅读:
    SharePoint 2013 中的SQL Server 安全
    SharePoint 2013 的HTML5特性之响应式布局
    SharePoint 2013 一些小技巧
    SharePoint 2013 排错之"Code blocks are not allowed in this file"
    SharePoint 2013 创建搜索中心及搜索设置
    SharePoint 2013 使用PowerShell创建State Service
    SharePoint 2013 内容部署功能简介
    SharePoint 使用PowerShell恢复误删的网站集
    SharePoint 自定义WebPart之间的连接
    linux之misc及使用misc创建字符设备
  • 原文地址:https://www.cnblogs.com/yuerdong/p/7837806.html
Copyright © 2011-2022 走看看