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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5.     <script>
  6.         function updateTime(){ //更新SVG时钟来显示当前时间
  7.             var now=new Date(); //当前时间
  8.             var min=now.getMinutes(); //分钟
  9.             var hour=(now.getHours()%12)+min/60; //转换成可以在时钟上表示的时间
  10.             var minangle=min*6; //每6°表示一分钟
  11.             var hourangle=hour*30; //每30°表示一小时
  12.  
  13.             //获取表示时钟时针和分针的SVG元素
  14.  
  15.             var minhand=document.getElementById("minutehand");
  16.             var hourhand=document.getElementById("hourhand");
  17.  
  18.             //设置元素的SVG属性，将它们移动到钟面上
  19.             minhand.setAttribute("transform","rotate("+minangle+",50,50)");
  20.             hourhand.setAttribute("transform","rotate("+hourangle+",50,50)");
  21.             //每一分钟更新下时钟显示时间
  22.             setTimeout(updateTime,60000);
  23.         }
  24.     </script>
  25.     <style>
  26.         /*下面定义的所有CSS样式后悔作用在SVG元素上*/
  27.         #clock{  /*通用语时钟的全局样式*/
  28.             stroke:black; /*黑线*/
  29.             stroke-linecap:round; /*圆角*/
  30.             fill:#eef; /*以浅蓝灰色作为背景*/
  31.         }
  32.         #face{ stroke:width:3px; } /*时钟的外边框*/
  33.         #ticks{ stroke:width:2; } /*标记每个小时的线段*/
  34.         #hourhand{stroke:width:5px;} /*相对较粗的时针*/
  35.         #minutehand{stroke:width:3px;}/*相对较细的分针*/
  36.         #numbers{ /*如何绘制数字*/
  37.             font-family: sans-serif;font-size: 7pt;font-weight: bold;
  38.             text-anchor:middle;stroke:none;fill:black;
  39.         }
  40.     </style>
  41. </head>
  42. <body onload="updateTime()">
  43. <!--vieBox是坐标系，width和height是屏幕大小-->
  44.     <svg id="clock" viewBox="0 0 100 100" width="500" height="500">
  45.         <defs><!--定义下拉阴影的滤镜-->
  46.             <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
  47.                 <feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur"/>
  48.                 <feOffset in="blur" dx="1" dy="1" result="shadow"/>
  49.                 <feMerge>
  50.                     <feMergeNode in="SourceGraphic"/>
  51.                     <feMergeNode in="shadow"/>
  52.                 </feMerge>
  53.             </filter>
  54.         </defs>
  55.         <circle id="face" cx="50" cy="50" r="45"/><!--钟面-->
  56.         <g id="ticks"> <!--12小时的刻度-->
  57.             <line x1="50" y1="5.000" x2="50.00" y2="10.00"/>
  58.             <line x1="72.50" y1="11.03" x2="70.00" y2="15.36"/>
  59.             <line x1="88.97" y1="27.50" x2="84.64" y2="30.00"/>
  60.             <line x1="95.00" y1="50.00" x2="90.00" y2="50.00"/>
  61.             <line x1="88.97" y1="72.50" x2="84.64" y2="70.00"/>
  62.             <line x1="72.50" y1="88.97" x2="70.00" y2="84.64"/>
  63.             <line x1="50.00" y1="95.00" x2="50.00" y2="90.00"/>
  64.             <line x1="27.50" y1="88.97" x2="30.00" y2="84.64"/>
  65.             <line x1="11.03" y1="72.50" x2="15.36" y2="70.00"/>
  66.             <line x1="5.000" y1="50.00" x2="10.00" y2="50.00"/>
  67.             <line x1="11.03" y1="27.50" x2="15.36" y2="30.00"/>
  68.             <line x1="27.50" y1="11.03" x2="30.00" y2="15.36"/>
  69.         </g>
  70.         <g id="numbers"><!--标记重要的几个刻度-->
  71.             <text x="50" y="18">12</text>
  72.             <text x="85" y="53">3</text>
  73.             <text x="50" y="88">6</text>
  74.             <text x="15" y="53">9</text>
  75.         </g>
  76.         <!--初始绘制成竖直额度指针，之后通过javascript代码来做旋转-->
  77.         <g id="hands" filter="url(#shadow)"> <!--给指针添加阴影-->
  78.             <line id="hourhand" x1="50" y1="50" x2="50" y2="24"/>
  79.             <line id="minutehand" x1="50" y1="50" x2="50" y2="20"/>
  80.         </g>
  81.     </svg>
  82. </body>
  83. </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. Lucene的基本应用

    import java.io.File; import java.io.IOException; import java.util.ArrayList; import java.util.List; ...

  2. AngularJS的ng-repeat显示属性名和属性值

    代码下载:https://files.cnblogs.com/files/xiandedanteng/AngularJSAuthorRepeat.rar 代码: <!DOCTYPE HTML P ...

  3. 直接返回list不封装的结果集

    直接返回list不封装的结果集,在Jsp访问方式: 1.封装成map访问 2.用jstl: <c:forEach var="images" items="${lis ...

  4. Name和:Name

    http://www.cnblogs.com/tianyutingxy/archive/2011/02/23/1962078.html http://www.tuicool.com/articles/ ...

  5. python（4）- 简单练习：python实现购物车的优化

    购物车程序优化题目要求: 1. 用户退出时打印商品列表时,按以下格式 -------您购买的商品如下------ id    商品    数量    单价    总价 1      iPhone 2  ...

  6. Django小项目练习

    Django学生管理系统 urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^class_list/', views.class_list ...

  7. 关于0基础磁盘管理（gpt UEFI...)最好的一篇文章(来自gentoo linux)

    放链接:https://wiki.gentoo.org/wiki/Handbook:AMD64/Installation/Disks 顺便几张图 watermark/2/text/aHR0cDovL2 ...

  8. 用callgraph生成的两张函数调用关系图

    参考这里,感觉很Cool吧. Linux-0.11函数调用关系图: QEMU函数调用关系图:

  9. antd移动端onClick事件点击无效

    最近空余时间比较多,自己想学习react跟移动端的东西,就选用了antd-mobile库,框架搭好开发过程中遇到个问题,里面绑定的点击事件无效,不仅是antd自带的按钮无效,原生button点击也没反 ...

  10. VB.NET版机房收费系统—数据库设计

    之前第一遍机房收费的时候,用的数据库是别人的.认知也仅仅能建立在别人的基础上,等自考中<数据库系统原理>这本书学完了之后,再去看曾经的数据库,发现数据库真的还须要进一步的优化.以下是我设计 ...