九州彩票苹果版

词条信息

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

相关词条

天天广告联盟
 九州彩票苹果版  九州彩票苹果版

热门词条

更多>>
社群营销的2大法则
随着微信的普及,“社群营销”概念被提出且越来越火热,各种各样的[详细]
谷歌?CEO?回应欧盟???安卓免费模式或终结
欧盟以谷歌违反反垄断法为由对其开出了 43.4 亿欧元的创纪录[详细]
如果 Android 真的收费了
欧盟再次拿 Google 开刀,因为 Android 系统[详细]
警惕!最新传销名单!
  近日,河南新乡警方破获一起特大暴力传销案,由一名女孩割腕引[详细]
2018年10个大数据草创公司。
依据市场研究公司IDC的数据,估计大数据和营业剖析手艺的支出将[详细]
九州彩票苹果版 >>所属分类 >> 程序开发    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>

 

 

本文地址:九州彩票苹果版 //www.ddqsu.com.cn/doc-view-4987.html

TAGS:九州彩票苹果版 , 电脑技术 , 电脑知识 , 网站建设, 电脑技术, 网络营销 , 网站托管 , 硬件技术 , 网络技术 , 软件技术, 维修网点

附件列表


按字母顺序浏览: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. 如果您没有找到需要的电脑技术问题词条,您可以到百科问答提问或创建词条,等待高手解答。

关于本词条的提问

查看全部/我要提问>>
  • 开房丢枪和“处女膜证明”事件中的清与浊 2018-12-10
  • 社交短视频:“抖”起来 沉下去 2018-12-10
  • 夏天穿件吊带连体裤 帅气美丽又清凉 2018-12-09
  • “蝇贪”扑面硕鼠村官难禁 基层“一把手”违纪多发 2018-12-08
  • 大豆自己种,芯片自己造 2018-12-07
  • 西咸新区四天18宗土地成交 土拍市场活跃三桥板块成焦点 2018-12-06
  • 南方医院乳腺科 乳腺疾病免费解答 2018-12-05
  • China Focus Dragon Boat Festival celebrated across China - Culture News - CQNEWS 2018-12-04
  • 广州拟提前实施 国Ⅵ排放标准 2018-12-04
  • 建立校际联盟教育共同体 促义务教育均衡发展 2018-12-03
  • 马英九参加佛教祈福活动相关新闻 2018-12-02
  • 回复@看着就想笑:那就你说了算 2018-12-02
  • 【巴州天气】最新巴州今天天气,实时提供巴州气温、空气质量、24小时天气预报、生活指数查询 2018-12-01
  • 女性之声——全国妇联 2018-12-01
  • 航天员沙漠野外生存训练完美收官!为第一天团打call 2018-11-30
  • 512| 38| 93| 95| 896| 768| 976| 517| 436| 168|