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 相关文章推荐
『jQuery』名称冲突使用noConflict方法解决
Apr 22 Javascript
jquery清空textarea等输入框实现代码
Apr 22 Javascript
深入领悟JavaScript中的面向对象
Nov 18 Javascript
使用js写的一个简易的投票
Nov 27 Javascript
jQuery中addClass()方法用法实例
Jan 05 Javascript
javascript查询字符串参数的方法
Jan 28 Javascript
jquery实现动态改变div宽度和高度
May 08 Javascript
JavaScript判断DIV内容是否为空的方法
Jan 29 Javascript
JS声明式函数与赋值式函数实例分析
Dec 13 Javascript
JavaScript实现计数器基础方法
Oct 10 Javascript
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
JS实现用特殊符号替换字符串的中间部分区域的实例代码
Jul 24 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
德生PL450的电路分析和低放电路的改进办法
2021/03/02 无线电
PHP 分页类(模仿google)-面试题目解答
2009/09/13 PHP
php下保存远程图片到本地的办法
2010/08/08 PHP
wamp服务器访问php非常缓慢的解决过程
2015/07/01 PHP
如何打开php的gd2库
2017/02/09 PHP
PHP新特性详解之命名空间、性状与生成器
2017/07/18 PHP
javascript基础之查找元素的详细介绍(访问节点)
2013/07/05 Javascript
ExtJS4中的requires使用方法示例介绍
2013/12/03 Javascript
javascript获取checkbox复选框获取选中的选项
2014/08/12 Javascript
javascript+css3 实现动态按钮菜单特效
2016/02/06 Javascript
JS中微信小程序自定义底部弹出框
2016/12/22 Javascript
原生js实现图片放大缩小计时器效果
2017/01/20 Javascript
在vue项目中引入高德地图及其UI组件的方法
2018/09/04 Javascript
Vue触发隐藏input file的方法实例详解
2019/08/14 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
2019/09/24 Javascript
这15个Vue指令,让你的项目开发爽到爆
2019/10/11 Javascript
es6函数name属性功能与用法实例分析
2020/04/18 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
2020/08/03 Javascript
[48:02]Ti4循环赛第三日 VG vs Liquid和NEWBEE vs DK
2014/07/12 DOTA
Python实例之wxpython中Frame使用方法
2014/06/09 Python
推荐10款最受Python开发者欢迎的Python IDE
2018/09/16 Python
Python Flask框架模板操作实例分析
2019/05/03 Python
超简单的Python HTTP服务
2019/07/22 Python
Django中自定义查询对象的具体使用
2019/10/13 Python
tensorflow实现从.ckpt文件中读取任意变量
2020/05/26 Python
什么是makefile? 如何编写makefile?
2012/08/08 面试题
领导证婚人证婚词
2014/01/13 职场文书
学生会离职感言
2014/02/11 职场文书
学习十八届三中全会精神实施方案
2014/02/17 职场文书
纪念九一八事变演讲稿:勿忘国耻
2014/09/14 职场文书
试用期转正后的自我评价
2014/09/21 职场文书
2015年女工委工作总结
2015/07/27 职场文书
导游词之河北白洋淀
2020/01/15 职场文书
浅谈Python类的单继承相关知识
2021/05/12 Python
关于使用Redisson订阅数问题
2022/01/18 Redis
mysql自增长id用完了该怎么办
2022/02/12 MySQL