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 相关文章推荐
jQuery 表单验证扩展(三)
Oct 20 Javascript
javascript实现验证身份证号的有效性并提示
Apr 30 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
Sep 15 Javascript
Bootstrap表格和栅格分页实例详解
May 20 Javascript
微信小程序 loading(加载中提示框)实例
Oct 28 Javascript
JavaScript表单验证的两种实现方法
Feb 11 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
May 27 Javascript
详解node如何让一个端口同时支持https与http
Jul 04 Javascript
vue-cli项目中使用echarts图表实例
Oct 22 Javascript
React精髓!一篇全概括小结(急速)
May 23 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
Jun 16 Javascript
解决Vue大括号字符换行踩的坑
Nov 09 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
《魔兽争霸3:重制版》翻车了?你想要的我们都没有
2019/11/07 魔兽争霸
COM in PHP (winows only)
2006/10/09 PHP
PHP中开发XML应用程序之基础篇 添加节点 删除节点 查询节点 查询节
2010/07/09 PHP
PHP微信开发之二维码生成类
2015/06/26 PHP
通过php动态传数据到highcharts
2017/04/05 PHP
JavaScript常用对象的方法和属性小结
2012/01/24 Javascript
js导入导出excel(实例代码)
2013/11/25 Javascript
javascript + jquery实现定时修改文章标题
2014/03/19 Javascript
jQuery实现向下滑出的二级菜单效果实例
2015/08/22 Javascript
Jquery easyui 实现动态树
2015/11/17 Javascript
AngularJs解决跨域问题案例详解(简单方法)
2016/05/19 Javascript
angularjs 表单密码验证自定义指令实现代码
2016/10/27 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
2017/01/23 Javascript
JS计算两个时间相差分钟数的方法示例
2018/01/10 Javascript
微信小程序实现验证码获取倒计时效果
2018/02/08 Javascript
小程序云开发如何实现图片上传及发表文字
2019/05/17 Javascript
JS中call()和apply()的功能及用法实例分析
2019/06/28 Javascript
[46:25]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第二局
2016/03/05 DOTA
Python字符串格式化输出方法分析
2016/04/13 Python
Python实现数据库并行读取和写入实例
2017/06/09 Python
Python协程 yield与协程greenlet简单用法示例
2019/11/22 Python
jupyter notebook 多行输出实例
2020/04/09 Python
Python读取Excel数据并生成图表过程解析
2020/06/18 Python
移动web模拟客户端实现多方框输入密码效果【附代码】
2016/03/25 HTML / CSS
Brookstone美国官网:独特新奇产品
2017/03/04 全球购物
Amara美国站:英国高端家居礼品网站,世界各地的奢侈家具品牌
2017/07/26 全球购物
澳大利亚网上玩具商店:Mr Toys Toyworld
2018/03/25 全球购物
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
prAna官网:瑜伽、旅行和冒险服装
2019/03/10 全球购物
初中校园之声广播稿
2014/01/15 职场文书
幼儿园亲子活动总结
2014/04/26 职场文书
团代会邀请函
2015/02/02 职场文书
西柏坡观后感
2015/06/08 职场文书
图书馆义工感想
2015/08/07 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书
Win11如何默认打开软件界面最大化?Win11默认打开软件界面最大化的方法
2022/07/15 数码科技