没有做秒针，只做了分针和时针，5分钟以后来看应该可以看到效果╮(╯-╰)╭

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <script>

        function updateTime(){ //更新SVG时钟来显示当前时间

            var now=new Date(); //当前时间

            var min=now.getMinutes(); //分钟

            var hour=(now.getHours()%12)+min/60; //转换成可以在时钟上表示的时间

            var minangle=min*6; //每6°表示一分钟

            var hourangle=hour*30; //每30°表示一小时

            //获取表示时钟时针和分针的SVG元素

            var minhand=document.getElementById("minutehand");

            var hourhand=document.getElementById("hourhand");

            //设置元素的SVG属性，将它们移动到钟面上

            minhand.setAttribute("transform","rotate("+minangle+",50,50)");

            hourhand.setAttribute("transform","rotate("+hourangle+",50,50)");

            //每一分钟更新下时钟显示时间

            setTimeout(updateTime,60000);

        }

    </script>

    <style>

        /*下面定义的所有CSS样式后悔作用在SVG元素上*/

        #clock{  /*通用语时钟的全局样式*/

            stroke:black; /*黑线*/

            stroke-linecap:round; /*圆角*/

            fill:#eef; /*以浅蓝灰色作为背景*/

        }

        #face{ stroke:width:3px; } /*时钟的外边框*/

        #ticks{ stroke:width:2; } /*标记每个小时的线段*/

        #hourhand{stroke:width:5px;} /*相对较粗的时针*/

        #minutehand{stroke:width:3px;}/*相对较细的分针*/

        #numbers{ /*如何绘制数字*/

            font-family: sans-serif;font-size: 7pt;font-weight: bold;

            text-anchor:middle;stroke:none;fill:black;

        }

    </style>

</head>

<body onload="updateTime()">

<!--vieBox是坐标系，width和height是屏幕大小-->

    <svg id="clock" viewBox="0 0 100 100" width="500" height="500">

        <defs><!--定义下拉阴影的滤镜-->

            <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">

                <feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur"/>

                <feOffset in="blur" dx="1" dy="1" result="shadow"/>

                <feMerge>

                    <feMergeNode in="SourceGraphic"/>

                    <feMergeNode in="shadow"/>

                </feMerge>

            </filter>

        </defs>

        <circle id="face" cx="50" cy="50" r="45"/><!--钟面-->

        <g id="ticks"> <!--12小时的刻度-->

            <line x1="50" y1="5.000" x2="50.00" y2="10.00"/>

            <line x1="72.50" y1="11.03" x2="70.00" y2="15.36"/>

            <line x1="88.97" y1="27.50" x2="84.64" y2="30.00"/>

            <line x1="95.00" y1="50.00" x2="90.00" y2="50.00"/>

            <line x1="88.97" y1="72.50" x2="84.64" y2="70.00"/>

            <line x1="72.50" y1="88.97" x2="70.00" y2="84.64"/>

            <line x1="50.00" y1="95.00" x2="50.00" y2="90.00"/>

            <line x1="27.50" y1="88.97" x2="30.00" y2="84.64"/>

            <line x1="11.03" y1="72.50" x2="15.36" y2="70.00"/>

            <line x1="5.000" y1="50.00" x2="10.00" y2="50.00"/>

            <line x1="11.03" y1="27.50" x2="15.36" y2="30.00"/>

            <line x1="27.50" y1="11.03" x2="30.00" y2="15.36"/>

        </g>

        <g id="numbers"><!--标记重要的几个刻度-->

            <text x="50" y="18">12</text>

            <text x="85" y="53">3</text>

            <text x="50" y="88">6</text>

            <text x="15" y="53">9</text>

        </g>

        <!--初始绘制成竖直额度指针，之后通过javascript代码来做旋转-->

        <g id="hands" filter="url(#shadow)"> <!--给指针添加阴影-->

            <line id="hourhand" x1="50" y1="50" x2="50" y2="24"/>

            <line id="minutehand" x1="50" y1="50" x2="50" y2="20"/>

        </g>

    </svg>

</body>

</html>

效果图如下：

【应用】SVG动态 时钟的更多相关文章

  1. JavaScript+svg绘制的一个动态时钟

    结果图: 代码如下: <!DOCTYPE html> <html> <head> <title>动态时钟</title> </head ...

  2. 环形进度条的实现方法总结和动态时钟绘制（CSS3、SVG、Canvas）

    缘由: 在某一个游戏公司的笔试中,最后一道大题是,“用CSS3实现根据动态显示时间和环形进度[效果如下图所示],且每个圆环的颜色不一样,不需要考虑IE6~8的兼容性”.当时第一想法是用SVG,因为SV ...

  3. linux动态时钟探索

    在早期的linux内核版本的时间概念都是由周期时钟提供的.虽然比较有效,但是,对于关注能耗电量的系统上,就不能满足长时间休眠的需求,因为周期系统要求必须在一定的频率下,周期性的处于活动状态.因此,li ...

  4. js 动态时钟

    js 动态时钟 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  5. 使用Timer类的两个实例 动态时钟

    package chapter16; import javax.swing.*; import chapter15.StillClock; import java.awt.event.*; publi ...

  6. js+css3动态时钟-------Day66

    昨天,有一天招,宽带到底没装上.相当恼火,不过包了一天租新房,有很多想法下来,其中,率先实现了--动态时钟(它已上载的资源,一些粗略的全貌.汗...) 这里记录.这个看似简单的功能,以达到良好的,我在 ...

  7. Linux时间子系统之八：动态时钟框架（CONFIG_NO_HZ、tickless）

    在前面章节的讨论中,我们一直基于一个假设:Linux中的时钟事件都是由一个周期时钟提供,不管系统中的clock_event_device是工作于周期触发模式,还是工作于单触发模式,也不管定时器系统是工 ...

  8. CSS3_过渡_2D 变换_瓶体旋转_动态时钟

    1. 过渡 transition 允许 CSS 的属性值在一定时间内平滑的过渡, 在鼠标点击,鼠标滑过或对属性改变中触发,并圆滑的改变 CSS 的属性值 简写属性: #box { width: 300 ...

  9. canvas ：原生javascript编写动态时钟

    canvas :原生javascript编写动态时钟     此时针是以画布的中心为圆心: g.translate(width/2,width/2); 此函数是将画布的原点移到(width/2,wid ...

随机推荐

  1. IntelliJ IDEA出现：java: Compilation failed: internal java compiler error的问题解决

    这两处地方要同时修改成一样的. 参考: http://blog.csdn.net/u011275152/article/details/45242201

  2. P2P技术简介（包括BT软件的分析）（转）

    这是一篇别人发表的论文,里面很全面的解释了P2P技术的实现,以及BT网络中应用P2P技术所设计的原理,并列举BT软件的一些专业名词的定义.由于论文发表的比较早,2005年时还没有DHT技术. (链接: ...

  3. U盘格式化时分配单元的大小的设置

    格式化时主要有如下格式,且对应的操作系统的不一样: FAT32:Windows和Mac都支持,不过单个文件不能超过4G,但可以采用分包压缩的方式搞定. NTFS:Windows专用格式,Mac常规无法 ...

  4. fastdfs-zyc监控系统的使用

    原文:http://blog.csdn.net/foreversunshine/article/details/51907659 写在前面 前面有介绍过怎么安装与使用FastDFS来进行分布式的文件存 ...

  5. UnicodeEncodeError: 'ascii' codec can't encode character u'\u5728' in position 1

    s = "图片picture"print chardet.detect(s) for c in s.decode('utf-8'): print c UnicodeEncodeEr ...

  6. [剑指Offer]2.变态跳台阶

    题目 一仅仅青蛙一次能够跳上1级台阶,也能够跳上2级--它也能够跳上n级. 求该青蛙跳上一个n级的台阶总共同拥有多少种跳法. 思路 用Fib(n)表示青蛙跳上n阶台阶的跳法数,设定Fib(0) = 1 ...

  7. OpenGL超级宝典笔记——深度纹理和阴影 【转】

    目录[-] 光源视角 新型的纹理 深度纹理的大小 首先绘制阴影 然后是光照 投影阴影贴图 阴影比较 之前我们介绍过简单的把物体压平到投影平面来制造阴影.但这种阴影方式有其局限性(如投影平面须是平面). ...

  8. HDU 5304(Eastest Magical Day Seep Group&#39;s Summer-环加外向树生成树计数)[Template:Kirchhoff矩阵]

    Eastest Magical Day Seep Group's Summer Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 655 ...

  9. 金山面试CDN

    History 今天去金山网络面试的时候,被问到性能优化,我说了几个.最后说到了CDN,我说要尽量把静态的内容放置到CDN,可是为什么呢?面试官说既然你说到CDN.你就说说它的原理. 之前有看过,可是 ...

  10. yum安装zabbix监控

    公司的服务器由于没有监控软件监控,最感觉不安全,就开始研究zabbix的安装,最后找到一个最简单的安装方法,在这里记录一下,方便以后的查阅 1.安装zabbix官方的软件配置仓库 rpm -ivh h ...