九州彩票苹果版

词条信息

admin
admin
超级管理员
最近编辑者 发短消息   

相关词条

热门词条

更多>>
什么是端口?到底是做什么的呢?
端口一般指两种,一种是硬件比如路由器或者交换机的插网线的端口,一种是软件的逻辑的概念,比如http的80端口!...
7种进阶方法让你快速测试端口连通性
Ping是Windows、Linux和Unix系统下的一个检查网络连通性的命令工具,对于大部分互联网用户来说很...
电脑开机,总需要按F1,是什么原因造成的?
一.主板掉电这个说法是行业内的叫法了,一般是主板的CMOS电池没电了导致的。也是最常见的一种提示你按F1的提示...
社保降费对个人有什么影响?
下调城镇职工基本养老保险单位缴费比例是政府给企业发的一个大红包,特别是对于企业来说是一个利好,但是对个人来说有...
车辆“出险”对下年保费的影响,到底有多大?
【出险对交强险的影响】【出险对商业险的影响】车辆“出险”对下年保费的影响,到底有多大?这里有必要先提下车险第三...
九州彩票苹果版 >>所属分类 >> 程序开发    JavaScript   

九州彩票: js+SVG实现动态时钟效果

九州彩票苹果版 www.ddqsu.com.cn 标签: js SVG 代码

顶[0] 发表评论(0) 编辑词条

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


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 >
 <!-- 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>

 

 

附件列表


按字母顺序浏览:A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

→我们致力于为广大网民解决所遇到的各种电脑技术问题
 如果您认为本词条还有待完善,请 编辑词条

上一篇如何提升Web前端性能?
下一篇js刷新页面方法大全

0
1. 本站部分内容来自互联网,如有任何版权侵犯或其他问题请与我们联系,我们将立即删除或处理。
2. 本站内容仅供参考,如果您需要解决具体问题,建议您咨询相关领域专业人士。
3. 如果您没有找到需要的百科词条,您可以到百科问答提问或创建词条,等待高手解答。

关于本词条的提问

查看全部/我要提问>>
  • 小萌们以为计划就是一拍脑袋一张嘴那么简单? 2019-05-21
  • 庄聪生:企业应正确处理“义”与“利”的关系 2019-05-21
  • 租购并举渐入佳境构建楼市阶梯型消费 2019-05-20
  • 《人民日报》让我爱上了文学(原创首发) 2019-05-20
  • 庆祝中国人民解放军建军90周年大会在人民大会堂举行 2019-05-19
  • 紫光阁中共中央国家机关工作委员会 2019-05-19
  • 尧都农商银行全力推进服务“三农”工作 2019-05-18
  • 毕业当援疆 去祖国最需要的地方 2019-05-17
  • 加速冲刺“第一个百年目标”——落实两会精神打好全面建成小康社会三大攻坚战 2019-05-16
  • 【新时代 新作为 新篇章】年年岁岁扒龙舟 广州今年河水最清澈 2019-05-15
  • 网红主播直播违法屡屡发生 法律意识淡薄是主因 2019-05-14
  • 夏日甘肃陇南天池碧水青山显俊秀之美 2019-05-13
  • 苗山脱贫影像志——父母在 不远行 2019-05-13
  • 为多彩贵州新未来贡献更多检察力量 2019-05-12
  • 34岁男子打拼10年买百万豪车 如今在街头崩溃大哭 2019-05-11
  • 956| 890| 166| 298| 672| 541| 947| 598| 160| 290|