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插件jQuery-JSONP开发ajax调用使用注意事项
Nov 22 Javascript
js中 javascript:void(0) 用法详解
Aug 11 Javascript
jquery Banner轮播选项卡
Dec 26 Javascript
canvas绘制七巧板
Feb 03 Javascript
深入理解Vue 的条件渲染和列表渲染
Sep 01 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
Sep 13 Javascript
javascript按钮禁用和启用的效果实例代码
Oct 29 Javascript
mui back 返回刷新页面的实例
Dec 06 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
Aug 07 Javascript
Vue 中对图片地址进行拼接的方法
Sep 03 Javascript
详解Vue.js在页面加载时执行某个方法
Nov 20 Javascript
react antd实现动态增减表单
Jun 03 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 阴历-农历-转换类代码
2012/01/16 PHP
tp5框架使用composer实现日志记录功能示例
2019/01/10 PHP
laravel model模型处理之修改查询或修改字段时的类型格式案例
2019/10/17 PHP
jquery实现点击弹出层效果的简单实例
2014/03/03 Javascript
jQuery对象初始化的传参方式
2015/02/26 Javascript
1秒50万字!js实现关键词匹配
2016/08/01 Javascript
Jquery实现跨域异步上传文件总结
2017/02/03 Javascript
Vue 进阶教程之v-model详解
2017/05/06 Javascript
详解在 Angular 项目中添加 clean-blog 模板
2017/07/04 Javascript
vue resource post请求时遇到的坑
2017/10/19 Javascript
浅谈使用React.setState需要注意的三点
2017/12/18 Javascript
Vue中的slot使用插槽分发内容的方法
2018/03/01 Javascript
jQuery中图片展示插件highslide.js的简单dom
2018/04/22 jQuery
Vue父子组件双向绑定传值的实现方法
2018/07/31 Javascript
nodejs实现用户登录路由功能
2019/05/22 NodeJs
使用layer弹窗,制作编辑User信息页面的方法
2019/09/27 Javascript
ElementUI多个子组件表单的校验管理实现
2019/11/07 Javascript
vue 中的 render 函数作用详解
2020/02/28 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
2020/04/22 Javascript
python3.5 + PyQt5 +Eric6 实现的一个计算器代码
2017/03/11 Python
python+opencv实现动态物体追踪
2018/01/09 Python
python针对不定分隔符切割提取字符串的方法
2018/10/26 Python
详解Python 定时框架 Apscheduler原理及安装过程
2019/06/14 Python
基于python实现蓝牙通信代码实例
2019/11/19 Python
Python使用QQ邮箱发送邮件报错smtplib.SMTPAuthenticationError
2019/12/20 Python
Jupyter notebook如何修改平台字体
2020/05/13 Python
Python plt 利用subplot 实现在一张画布同时画多张图
2021/02/26 Python
H5最强接口之canvas实现动态图形功能
2019/05/31 HTML / CSS
专科毕业生自我鉴定
2013/12/01 职场文书
员工考核管理制度
2014/02/02 职场文书
企业口号大全
2014/06/12 职场文书
优秀教师自我评价范文
2014/09/27 职场文书
2014年银行信贷员工作总结
2014/12/08 职场文书
学雷锋团日活动总结
2015/05/06 职场文书
借条格式范本
2015/05/25 职场文书
Python学习之包与模块详解
2022/03/19 Python