js+SVG实现动态时钟效果


Posted in Javascript onJuly 14, 2018

本文实例为大家分享了js+SVG实现动态时钟效果展示的具体代码,供大家参考,具体内容如下

js+SVG实现动态时钟效果

<!DOCTYPE HTML>
<html>
<meta charset="utf-8">
<head>
<title>Analog Clock</title>
<script>
function updateTime() { 
 var now = new Date();      // 当前时间
 var min = now.getMinutes();     // 分钟
 var hour = (now.getHours() % 12) + min/60; // 转行成可以在时钟上表示的时间
 var seconds = now.getSeconds();    //秒钟
 var minangle = min*6;      // 6度表示一分钟
 var hourangle = hour*30;     // 30 表示一小时
 var secrangel = seconds * 6;    // 6度表示一秒钟
 // 获取表示时钟时针的SVG元素
 var minhand = document.getElementById("minutehand");
 var hourhand = document.getElementById("hourhand");
 var secondhand = document.getElementById("secondhand");

 // 设置这些元素的SVG属性,将它们移动到钟面上
 minhand.setAttribute("transform", "rotate(" + minangle + ",50,50)");
 hourhand.setAttribute("transform", "rotate(" + hourangle + ",50,50)");
 secondhand.setAttribute("transform", "rotate(" + secrangel + ",50,50)");
 // 每秒钟更新下时钟显示时间
 setTimeout(updateTime, 1000);
}
</script>
<style>

#clock {       
 stroke: black;     
 stroke-linecap: round;   
 fill: #eef;     
}
#face { stroke-width: 2px;}  
#ticks { stroke-width: 2px; }  
#hourhand {stroke-width: 3px;} 
#minutehand {stroke-width: 2px;} 
#secondhand{stroke-width: 1px;}
#numbers {      
 font-family: sans-serif; font-size: 7pt; font-weight: bold; 
 text-anchor: middle; stroke: none; fill: black;
}
</style>
</head>
<body onload="updateTime()">
 <!-- viewBox是坐标系,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>
 <!-- 初始绘制成竖直的指针,之后通过js来做旋转 -->
 <g id="hands" filter="url(#shadow)"> <!-- 给指针添加阴影 -->
  <line id="hourhand" x1="50" y1="50" x2="50" y2="25"/>
  <line id="minutehand" x1="50" y1="50" x2="50" y2="18"/>
  <line id="secondhand" x1="50" y1="50" x2="50" y2="11"/>
 </g>
 </svg>
</body>
</html>

更多JavaScript时钟特效点击查看:JavaScript时钟特效专题

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

Javascript 相关文章推荐
发现的以前不知道的函数
Sep 19 Javascript
JavaScript获取表单enctype属性的方法
Apr 02 Javascript
js获取隐藏元素宽高的实现方法
May 19 Javascript
react 父组件与子组件之间的值传递的方法
Sep 14 Javascript
微信运维交互机器人的示例代码
Nov 12 Javascript
解决layui的input独占一行的问题
Sep 10 Javascript
Layui事件监听的实现(表单和数据表格)
Oct 17 Javascript
vue+element树组件 实现树懒加载的过程详解
Oct 21 Javascript
JS实现省市县三级下拉联动
Apr 10 Javascript
JavaScript进阶(一)变量声明提升实例分析
May 09 Javascript
vue 实现根据data中的属性值来设置不同的样式
Aug 04 Javascript
AJAX XMLHttpRequest对象创建使用详解
Aug 20 Javascript
vue实现通讯录功能
Jul 14 #Javascript
微信小程序自定义组件实现tabs选项卡功能
Jul 14 #Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
Apr 21 #Javascript
微信小程序实现自上而下字幕滚动
Jul 14 #Javascript
微信小程序scroll-view实现字幕滚动
Jul 14 #Javascript
微信小程序仿RadioGroup改变样式的处理方案
Jul 13 #Javascript
通过封装scroll.js 获取滚动条的值
Jul 13 #Javascript
You might like
香妃
2021/03/03 冲泡冲煮
phpmyadmin 常用选项设置详解版
2010/03/07 PHP
浅析php数据类型转换
2014/01/09 PHP
PHP获取文件夹内文件数的方法
2015/03/12 PHP
微信公众号OAuth2.0网页授权问题浅析
2017/01/21 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
window.open的功能全解析
2006/10/10 Javascript
JavaScript中实现块作用域的方法
2010/04/01 Javascript
调试Node.JS的辅助工具(NodeWatcher)
2012/01/04 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
2013/10/21 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
2014/01/10 Javascript
JS文本获得焦点清除文本文字的示例代码
2014/01/13 Javascript
JavaScript实现彩虹文字效果的方法
2015/04/16 Javascript
如何判断Javascript对象是否存在的简单实例
2016/05/18 Javascript
javascript获取select标签选中的值
2016/06/04 Javascript
javascript日期比较方法实例分析
2016/06/17 Javascript
jquery实现下拉框多选方法介绍
2017/01/03 Javascript
前后端如何实现登录token拦截校验详解
2018/09/03 Javascript
vue实现搜索过滤效果
2019/05/28 Javascript
Python基本数据类型详细介绍
2014/03/11 Python
python写的一个squid访问日志分析的小程序
2014/09/17 Python
Python 内置变量和函数的查看及说明介绍
2019/12/25 Python
HTML5实现Notification API桌面通知功能
2016/03/02 HTML / CSS
100%有机精油,美容油:House of Pure Essence
2018/10/30 全球购物
企划专员岗位职责
2013/12/09 职场文书
五年级英语教学反思
2014/01/31 职场文书
新闻专业毕业生英文求职信
2014/03/19 职场文书
防汛工作情况汇报
2014/10/28 职场文书
政风行风整改报告
2014/11/06 职场文书
慰问信模板
2015/02/14 职场文书
产品调价通知函
2015/04/20 职场文书
员工拾金不昧表扬稿
2015/05/05 职场文书
上诉状格式
2015/05/23 职场文书
毕业生政审意见范文
2015/06/04 职场文书
高中军训感想
2015/08/07 职场文书
团队拓展训练心得体会
2016/01/12 职场文书