SVG实现时钟效果

本文实例为大家分享了SVG实现时钟效果的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8"/>
 <title></title>
 <style>
  * {
   margin: 0;
  }
 </style>
</head>

<body>
<svg width="400" height="400">
 <title>SVG Analog Clock</title>
 <circle id="face" cx="125" cy="125" r="100"
     style="fill: #f1f1f1; stroke: #000;"></circle>
 <g id="ticks" transform="translate(125, 125)">
  <path id="triangle" d="M95 0 L 100 -5 L 100 5 Z"
     transform="rotate(360)"></path>
 </g>
 <g id="hands">
  <path id="hour" d="M 125 125 V 75"
     style="fill: none; stroke: black; stroke-width: 6"
     transform="rotate(0)"></path>

  <path id="minute" d="M 125 125 V 50"
     style="fill: none; stroke: black; stroke-width: 4"
     transform="rotate(0)"></path>

  <path id="second" d="M 125 125 Q 100 100 125 80 T 125 40 V 30"
     style="fill: none; stroke: #f00; stroke-width: 2"
     transform="rotate(0)"></path>
 </g>
 <g id="knob" transform="translate(125, 125)">
  <circle cx="0" cy="0" r="6" style="fill: #333;"></circle>
 </g>
</svg>

<script>
 var svgns = "http://www.w3.org/2000/svg";
 var face = document.getElementById("face"),
   ticks = document.getElementById("ticks"),
   triangle = document.getElementById("triangle"),
   txt = document.getElementById("txt");

 for (var i = 0; i < 11; i++) {
  var temp_triangle = triangle.cloneNode(true);
  var angle = i * 30 + 30;
  temp_triangle.setAttribute("transform", "rotate(" + angle + ")");
  ticks.appendChild(temp_triangle);
  ticks.setAttribute("transform", "translate(125, 125), rotate(-90)");
 }

 var hourHand = document.getElementById("hour"),
   minuteHand = document.getElementById("minute"),
   secondHand = document.getElementById("second");
 var hourTransform, minuteTransform, secondTransform;
 var secPer12Hours = 60 * 60 * 12,
   secPerHour = 60 * 60,
   secPerMinute = 60;

 (function init() {
  hourTransform = hourHand.transform.baseVal.getItem(0);
  minuteTransform = minuteHand.transform.baseVal.getItem(0);
  secondTransform = secondHand.transform.baseVal.getItem(0);
  updateClock();
 })()

 function updateClock() {
  var date = new Date();
  var sec = date.getMilliseconds() / 1000 +
    date.getSeconds() +
    date.getMinutes() * 60 +
    date.getHours() * 60 * 60;
  var hourAngle = (sec % secPer12Hours) * 360 / secPer12Hours,
    minuteAngle = (sec % secPerHour) * 360 / secPerHour,
    secondAngle = (sec % secPerMinute) * 360 / secPerMinute;
  hourTransform.setRotate(hourAngle, 125, 125);
  minuteTransform.setRotate(minuteAngle, 125, 125);
  secondTransform.setRotate(secondAngle, 125, 125);
  window.requestAnimationFrame(updateClock);
 }

</script>
</body>

</html>

浏览器需要支持：requestAnimationFrame
有关requestAnimationFrame的相关知识请自行查阅

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 前端必备神器 Snap.svg 弹动效果

    前端必备神器 Snap.svg 弹动效果

    有人说不会 SVG 的前端开发者不叫开发者,而叫爱好者.前端不光是 Angularjs 了,这时候再不学 SVG 就晚了!(如果你只会 jQuery 就当我没说...)这里我就给大家分享一个前几天在别处看到的一个高大上的 SVG 效果,左边菜单弹出来会动动弹的说,链接点这里. 当时我就震惊了,今天抽空搞清了源码,然后下面是我潜心研究后做出来的 Demo,虽然比较粗糙,但还是很洋气的感觉呢.下面我就这个 DEMO 跟大家分享一下. http://jsfiddle.net/windwhinny/n6

  • 基于SVG的web页面图形绘制API介绍及编程演示

    基于SVG的web页面图形绘制API介绍及编程演示

    一:什么是SVG SVG是1999由W3C发布的2D图形描述语言,纯基于XML格式的标记语言,SVG的 全称是可扩展的矢量图形跟传统的Raster方式的图形(JPG, PNG, GIF等)有很大的差 别.SVG是2D图形开发平台,包括两个部分,一个是基于XML语言的数据描述,另 外一部分是可编程的API,其关键特性支持图形,文本,梯度填充,画笔风格,图形 特效滤镜如高斯模糊,会在稍后的代码中演示.同时还支持各种鼠标事件与DOM部 分API.几乎所有的主流浏览器都支持SVG图形格式的现实与绘制,I

  • 在 React、Vue项目中使用SVG的方法

    在 React、Vue项目中使用SVG的方法

    在一些现代的扁平化设计网站,特别是移动端网站,经常会包含许多简单而清晰的小图标,例如网站图标.用户的默认头像.移动端网页首页底部固定的切换栏等,这些小图标一般都是由美工做好,可能会放到精灵图上,前端再进行裁切展示. 而实际上,这些简单的小图标完全没必要让美工来做,前端完全可以通过 svg使用代码把这些简单的图标画出来,并且,因为这些图标是用代码描述出来的,所以如果想要修改这些图标,例如改变图标的颜色.图标的形状.大小等,都只是改几行代码的事情,非常简单,根本无需美工返工重做. 本文不是阐述如何利

  • 用svg制作富有动态的tooltip

    用svg制作富有动态的tooltip

    昨晚看了用svg如何制作富有动态的tooltip,于是今天就心血来潮学着做一下,于是也成功做出来,也明白其中的原理,收获颇多阿!接下来要多去学习svg,这是个好东西. 这其中也注意了一些平时纠结的细节应该怎么去做,比如: <article> <section id="sound1"> </section> <section id="sound2"> </section> </article> a

  • svg动画之动态描边效果

    svg动画之动态描边效果

    1.首先先做一个简单的线一点一点画出来的效果,主要使用svg中的"strokeDasharray"."strokeDashoffset"属性,通过css3中的transtion改变strokeDashoffset来实现动画. 注:path中的数据通过在ai中划线后存储为svg格式就可以拿到: 效果图: 代码如下: <svg class="move_line1" xmlns="http://www.w3.org/2000/svg&q

  • 小试SVG之新手小白入门教程

    小试SVG之新手小白入门教程

    基本概念 svg(Scalable Vector Graphics)是一种基于XML语法的图像格式,全称是可缩放矢量图,其它图像格式都是基于像素处理的,SVG则是属于对图像的形状描述,所以它本质上是文本文件,体积较小,且不管放大多少倍都不会失真.SVG是面向图形,HTML时面向文本. 嵌入到HTML SVG可以写在一个独立的文件中,然后用img, object, embed, iframe等标签插入网页 <img src="circle.svg"> <object i

  • 使用SVG基本操作API的实例讲解

    前面的话 本文将详细介绍SVG基本操作API,并使用这些API制作实例效果 基础API 在javascript中,可以使用一些基本的API来对SVG进行操作 [NS地址] 因为SVG定义在其自身的命令空间下,而不是HTML的命名空间下,可以作为单独的XML文件存在.所以需要使用自身的NS地址 有两个常用的NS地址 var SVG_NS = "http://www.w3.org/2000/svg"; var XLINK_NS = http://www.w3.org/1999/xlink;

  • 推荐10 款 SVG 动画的 JavaScript 库

    推荐10 款 SVG 动画的 JavaScript 库

    SVG 通常可以用作跨分辨率视频.这意味着在一块高分屏幕上不会降低图片的锐度.此外,你甚至可以让SVG动起来,通过使用一些javascript类库.下面,我们分享一些javascript类库,这些类库会帮助我们将SVG动画提高一个等级. Vivus Vivus 是一个能动画js类库,它能够给SVG图像显示出被画出来的过程.Vivus是没有其他类库依赖的(比如jQuery).你仅仅需要在页面中加入这个.js文件,然后传入需要被用来动画的SVG部分就行.同时通过指定一些配置,它能够在页面加载后直接显

  • SVG描边动画

    SVG描边动画

    效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>nubia</title> <style> .nubia_logo{ position: absolute; opacity: 0; animation:fadeIn 2s ease-in forwards; -webki

  • Svg.js实例教程及使用手册详解（一）

    什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 SVG 是万维网联盟的标准 SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体 简介: SVG.js是一个轻量级的JavaScript库,允许你轻松操作SVG和定义动画. SVG(Scalable Vector Graphics,可缩放矢量图形)是基

随机推荐