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 相关文章推荐
javascript 限制输入脚本大全
Nov 03 Javascript
jquery 圆形旋转图片滚动切换效果
Jan 19 Javascript
详解JavaScript函数绑定
Aug 18 Javascript
jquery获取一组checkbox的值(实例代码)
Nov 04 Javascript
node.js中的querystring.escape方法使用说明
Dec 10 Javascript
COM组件中调用JavaScript函数详解及实例
Feb 23 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
Jun 17 Javascript
vue-router 源码之实现一个简单的 vue-router
Jul 02 Javascript
react 应用多入口配置及实践总结
Oct 17 Javascript
微信小程序实现蒙版弹窗效果
Nov 01 Javascript
socket io与vue-cli的结合使用的示例代码
Nov 01 Javascript
JS运算符优先级与表达式示例详解
Sep 04 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
PHP树的代码,可以嵌套任意层
2006/10/09 PHP
让codeigniter与swfupload整合的最佳解决方案
2014/06/12 PHP
PHP使用FFmpeg获取视频播放总时长与码率等信息
2016/09/13 PHP
PHP 微信扫码支付源代码(推荐)
2016/11/03 PHP
Laravel 中创建 Zip 压缩文件并提供下载的实现方法
2019/04/02 PHP
PHP sdk实现在线打包代码示例
2020/12/09 PHP
javascript 简练的几个函数
2009/08/29 Javascript
文档对象模型DOM通俗讲解
2013/11/01 Javascript
jQuery删除当前节点元素
2016/12/07 Javascript
AngularJS的$location使用方法详解
2017/10/19 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
2018/11/02 Javascript
在vue项目中引入vue-beauty操作方法
2019/02/11 Javascript
javascript验证form表单数据的案例详解
2019/03/25 Javascript
sortable+element 实现表格行拖拽的方法示例
2019/06/07 Javascript
js实现随机圆与矩形功能
2020/10/29 Javascript
[02:08]2014DOTA2国际邀请赛 430专访:力争取得小组前二
2014/07/11 DOTA
[04:10]2016国际邀请赛中国区预选赛第二日TOP10精彩集锦
2016/06/28 DOTA
windows下python之mysqldb模块安装方法
2017/09/07 Python
python分布式环境下的限流器的示例
2017/10/26 Python
spark dataframe 将一列展开,把该列所有值都变成新列的方法
2019/01/29 Python
python 实现12bit灰度图像映射到8bit显示的方法
2019/07/08 Python
谈谈对css属性box-sizing的了解
2017/01/04 HTML / CSS
DHC中国官方购物网站:日本通信销售No.1化妆品
2016/08/20 全球购物
加拿大高尔夫超市:Golf Town
2018/01/12 全球购物
Currentbody西班牙:美容仪专家
2019/09/28 全球购物
SQL Server面试题
2013/04/04 面试题
兼职业务员岗位职责
2014/01/01 职场文书
工程资料员岗位职责
2014/03/10 职场文书
厂区绿化方案
2014/05/08 职场文书
社会稳定风险评估方案
2014/06/02 职场文书
市场营销工作计划书
2014/09/15 职场文书
会议通知范文
2015/04/15 职场文书
2015年电厂工作总结范文
2015/05/13 职场文书
大学开学感言
2015/08/01 职场文书
公司开业的祝贺语大全(60条)
2019/07/05 职场文书
Linux系统下安装PHP7.3版本
2021/06/26 PHP