SVG实现时钟效果


Posted in Javascript onJuly 17, 2018

本文实例为大家分享了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的相关知识请自行查阅

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS实现下拉菜单赋值到文本框的方法
Aug 18 Javascript
jquery实现的点击翻书效果代码
Nov 04 Javascript
jquery原理以及学习技巧介绍
Nov 11 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
Feb 21 Javascript
js简单判断flash是否加载完成的方法
Jun 21 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
Jun 13 Javascript
详解AngularJS2 Http服务
Jun 26 Javascript
vue2项目使用sass的示例代码
Jun 28 Javascript
基于vue展开收起动画的示例代码
Jul 05 Javascript
基于axios 解决跨域cookie丢失的问题
Sep 26 Javascript
VUE解决 v-html不能触发点击事件的问题
Oct 28 Javascript
vue.js 子组件无法获取父组件store值的解决方式
Nov 08 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
Jul 17 #Javascript
基于D3.js实现时钟效果
Jul 17 #Javascript
vue生成token并保存到本地存储中
Jul 17 #Javascript
vue脚手架搭建项目的兼容性配置详解
Jul 17 #Javascript
使用svg实现动态时钟效果
Jul 17 #Javascript
详解.vue文件中style标签的几个标识符
Jul 17 #Javascript
webstrom Debug 调试vue项目的方法步骤
Jul 17 #Javascript
You might like
隐藏你的.php文件的实现方法
2007/03/19 PHP
程序员的表白神器“520”大声喊出来
2016/05/20 PHP
深入浅析PHP的session反序列化漏洞问题
2017/06/15 PHP
laravel 解决groupBy时出现的错误 isn't in Group By问题
2019/10/17 PHP
javascript编程起步(第四课)
2007/02/27 Javascript
JObj预览一个JS的框架
2008/03/13 Javascript
基于javascript的JSON格式页面展示美化方法
2014/07/02 Javascript
JS实现当前页居中分页效果的方法
2015/06/18 Javascript
jquery实现平滑的二级下拉菜单效果
2015/08/26 Javascript
Bootstrap树形组件jqTree的简单封装
2016/01/25 Javascript
JavaScript递归操作实例浅析
2016/10/31 Javascript
jQuery EasyUI ProgressBar进度条组件
2017/02/28 Javascript
vue+swiper实现侧滑菜单效果
2017/12/28 Javascript
vue里面父组件修改子组件样式的方法
2018/02/03 Javascript
NodeJS如何实现同步的方法示例
2018/08/24 NodeJs
JS基于Location实现访问Url、重定向及刷新页面的方法分析
2018/12/03 Javascript
jQuery时间戳和日期相互转换操作示例
2018/12/07 jQuery
python通过装饰器检查函数参数数据类型的方法
2015/03/13 Python
使用Python操作MySQL的一些基本方法
2015/08/16 Python
python使用PIL给图片添加文字生成海报示例
2018/08/17 Python
对Python实现简单的API接口实例讲解
2018/12/10 Python
用python爬取租房网站信息的代码
2018/12/14 Python
Python/Django后端使用PIL Image生成头像缩略图
2019/04/30 Python
python pytest进阶之fixture详解
2019/06/27 Python
python中open函数的基本用法示例
2019/09/07 Python
python numpy中cumsum的用法详解
2019/10/17 Python
python opencv 实现读取、显示、写入图像的方法
2020/06/08 Python
pandas将list数据拆分成行或列的实现
2020/12/13 Python
芬兰攀岩、山地运动和户外活动用品购物网站:Bergfreunde
2016/10/06 全球购物
简单叙述一下MYSQL的优化
2016/05/09 面试题
晚会主持词开场白
2014/03/17 职场文书
《地震中的父与子》教学反思
2014/04/10 职场文书
考试作弊检讨书范文
2015/01/27 职场文书
高考诚信考试承诺书
2015/04/29 职场文书
缅怀先烈主题班会
2015/08/14 职场文书
公司岗位说明书
2015/10/08 职场文书