<!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;
    width:600px;
}
.clock{
    /* 时钟div */
    
    height:200px;
    width:200px;
    position:relative;
    overflow:hidden;
    float:left;
}
 
.clock .rotate{
    /* 两个旋转的div，每个都分为左右两部分 */
    position:absolute;
    width:200px;
    height:200px;
    top:0;
    left:0;
}
 
.rotate.right{
    display:none;
    z-index:11;
}
 
.clock .bg, .clock .front{
    width:100px;
    height:200px;
    
    position:absolute;
    top:0;
}
 
.clock .display{
    /* 小时，分钟，秒钟的显示 */
    position:absolute;
    width: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>
 

css+ js 实现圆环时钟的更多相关文章

  1. 转 CSS3+js实现多彩炫酷旋转圆环时钟效果

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. 【CSS3】纯CSS代码实现模拟时钟，+js对时功能。

    使用CSS3纯代码来实现模拟时钟,及指针动画功能. 在这里主要使用到css3一些基本元素: border-radius:圆角边框,画圆形:表盘 Transform:变换,旋转,扭曲:刻度盘,指针形状 ...

  3. js动态数字时钟

    js动态数字时钟 主要用到知识点: 主要是通过数组的一些方法,如:Array.from() Array.reduce() Array.find() 时间的处理和渲染 js用到面向对象的写法 实现的功能 ...

  4. js数字滑动时钟

    js数字滑动时钟: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  5. [JS,Canvas]日历时钟

    [JS,Canvas]日历时钟 Html: <!doctype html> <html> <head> <meta charset="UTF-8&q ...

  6. CSS & JS 制作滚动幻灯片

    ==================纯CSS方式==================== <!DOCTYPE html> <html> <head> <met ...

  7. 【转】Maven Jetty 插件的问题（css/js等目录死锁）的解决

    Maven Jetty 插件的问题(css/js等目录死锁,不能自动刷新)的解决:   1. 打开下面的目录:C:\Users\用户名\.m2\repository\org\eclipse\jetty ...

  8. Css Js Loader For Zencart

    Css Js Loader 描述:这个插件很早就出来了,可能知道人非常少 这个插件的功能是整合所有的网站的CSS和JS内容到一个文件里边. 因为CSS和JS文件到了一个文件,加快了程序的运行 在配合其 ...

  9. 购物车数字加减按钮HTML+CSS+JS（有需要嫌麻烦的小伙伴拿走不谢）

    之前在写详情页的时候,如下图 因为自己嫌麻烦,就去看其他网站是怎么写的,想直接拿来用,后来看来看去觉得写得很麻烦,于是最后还是决定自己写,附上HTML+CSS+JS代码,一条龙一站式贴心服务2333 ...

随机推荐

  1. ES6中常用的简写方式

    1. var foo = 'bar'; var baz = {foo}; baz // {foo: "bar"} // 等同于 var baz = {foo: foo}; 2. f ...

  2. Passpoint R1

    Passpoint R1 自从 Android 6.0 支持从网络下载包含配置文件和凭据信息的特殊文件来配置 Passpoint R1(第 1 版)凭据,Android 就一直支持 Passpoint ...

  3. 浅谈Sass与Less区别、优缺点

    Sass是一种动态样式语言,Sass语法的缩排语法,比Css比多出很多功能,如变量,嵌套,运算,继承,颜色处理,函数等,易于阅读.Cass的安装需要安装Ruby环境,是服务器端处理的,Less是需要引 ...

  4. php八大设计模式之装饰器模式

    我们都知道,得到一匹布需要大概这么几步: 1.染色 2.印花 3.裁剪 这种形式在面向对象中怎么实现呢? 面向过程[继承模式]实现: 继承模式得到需要的布料,一步一步的加工. 继承的层次越来越深,扩展 ...

  5. bzoj1604 牛的邻居 STL

    Description 了解奶牛们的人都知道,奶牛喜欢成群结队．观察约翰的N(1≤N≤100000)只奶牛,你会发现她们已经结成了几个“群”．每只奶牛在吃草的时候有一个独一无二的位置坐标Xi,Yi(l ...

  6. Lenovo k860i 移植Android 4.4 cm11进度记录【上篇已完结】

    2014.5.16 为了验证一下下载的CM11的源码有没有问题,决定编译一下cm官方支持的机器,手上正好有台nexus7 2012,就拿它为例测试一下在mac os x平台的整个编译过程. 1. 最开 ...

  7. Python 上下文（Context）学习笔记

    前言 最早接触到with语句的时候,是初学python,对文件进行读写的时候,当时文件读写一般都是用open()函数来对文件进行读写,为了防止读写的过程中出现错误,也为了让代码更加的pythonic, ...

  8. 可穿戴KEY带来的身份认证的革命

    在用户身份认证方面,PKI体系给出了极好的解决方式.即基于X.509数字证书的用户身份认证.该方法基于非对称公钥算法的难题为用户提供非常安全的认证过程. PKI体系尽管明白要求"私钥必须保密 ...

  9. hadoop(八) - sqoop安装与使用

    一. sqoop安装: 安装在一台节点上就能够了. 1. 使用winscp上传sqoop 2. 安装和配置 加入sqoop到环境变量 将数据库连接驱动mysql-connector-5.1.8.jar ...

  10. LeetCode 107 Binary Tree Level Order Traversal II（二叉树的层级顺序遍历2）（*）

    翻译 给定一个二叉树,返回从下往上遍历经过的每一个节点的值. 从左往右,从叶子到节点. 比如: 给定的二叉树是 {3,9,20,#,#,15,7}, 3 / \ 9 20 / \ 15 7 返回它从下 ...