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 相关文章推荐
js中将多个语句写成一个语句的两种方法小结
Dec 08 Javascript
将string解析为json的几种方式小结
Nov 11 Javascript
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
Apr 12 Javascript
读jQuery之五(取DOM元素)
Jun 20 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
Nov 22 Javascript
创建你的第一个AngularJS应用的方法
Jun 16 Javascript
Bootstrap每天必学之表格
Nov 23 Javascript
jQuery操作基本控件方法实例分析
Dec 31 Javascript
js将json格式的对象拼接成复杂的url参数方法
May 25 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
Oct 18 Javascript
详解webpack+vue-cli项目打包技巧
Jun 17 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 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
浅谈Windows下 PHP4.0与oracle 8的连接设置
2006/10/09 PHP
php simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
Youku 视频绝对地址获取的方法详解
2013/06/26 PHP
json的键名为数字时的调用方式(示例代码)
2013/11/15 PHP
PHP排序算法之归并排序(Merging Sort)实例详解
2018/04/21 PHP
用JS控制回车事件的代码
2011/02/20 Javascript
JQuery动态创建DOM、表单元素的实现代码
2011/08/09 Javascript
Firefox下无法正常显示年份的解决方法
2014/09/04 Javascript
Javascript基础知识(一)核心基础语法与事件模型
2014/09/29 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
2015/11/10 Javascript
js实现仿微博滚动显示信息的效果
2015/12/21 Javascript
基于AngularJS实现的工资计算器实例
2017/06/16 Javascript
two.js之实现动画效果示例
2017/11/06 Javascript
微信小程序实现循环动画效果
2018/07/16 Javascript
Vue+webpack+Element 兼容问题总结(小结)
2018/08/16 Javascript
浅谈React碰到v-if
2018/11/04 Javascript
详解Vue前端对axios的封装和使用
2019/04/01 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
2019/04/28 Javascript
vue3中轻松实现switch功能组件的全过程
2021/01/07 Vue.js
Django的HttpRequest和HttpResponse对象详解
2018/01/26 Python
Python http接口自动化测试框架实现方法示例
2018/12/06 Python
nohup后台启动Python脚本,log不刷新的解决方法
2019/01/14 Python
python tkinter库实现气泡屏保和锁屏
2019/07/29 Python
python集合的创建、添加及删除操作示例
2019/10/08 Python
《老王》教学反思
2014/02/23 职场文书
开展党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
夫妻双方自愿离婚协议书怎么写
2014/12/01 职场文书
先进员工事迹材料
2014/12/20 职场文书
西安兵马俑导游词
2015/02/02 职场文书
劳资员岗位职责
2015/02/13 职场文书
地球上的星星观后感
2015/06/02 职场文书
MySQL入门命令之函数-单行函数-流程控制函数
2021/04/05 MySQL
python如何在word中存储本地图片
2021/04/07 Python
详解如何在Canvas中添加事件的方法
2021/04/17 Javascript
html5中sharedWorker实现多页面通信的示例代码
2021/05/07 Javascript
Redis 持久化 RDB 与 AOF的执行过程
2021/11/07 Redis