优德娱乐场w88手机版:一个值得你收藏的教程网站

SVG实现时钟效果

时间:2018-07-24 15:36:12 编辑:猪哥 来源:转载

本文实例为大家分享了SVG实现时钟效果的具体代码,供大家参考,具体内容如下





 
 
 




 SVG Analog Clock
 
 
  
 
 
  

  

  
 
 
  
 


<script>
 var svgns = "http://www.w3.org/2000/svg";
 var face = document.getElementById("face"),
   ticks = document.getElementById("ticks"),
   triangle = document.getElementById("triangle"),
   txt = document.getElementById("txt");

 for (var i = 0; i < 11; i++) {
  var temp_triangle = triangle.cloneNode(true);
  var angle = i * 30 + 30;
  temp_triangle.setAttribute("transform", "rotate(" + angle + ")");
  ticks.appendChild(temp_triangle);
  ticks.setAttribute("transform", "translate(125, 125), rotate(-90)");
 }

 var hourHand = document.getElementById("hour"),
   minuteHand = document.getElementById("minute"),
   secondHand = document.getElementById("second");
 var hourTransform, minuteTransform, secondTransform;
 var secPer12Hours = 60 * 60 * 12,
   secPerHour = 60 * 60,
   secPerMinute = 60;

 (function init() {
  hourTransform = hourHand.transform.baseVal.getItem(0);
  minuteTransform = minuteHand.transform.baseVal.getItem(0);
  secondTransform = secondHand.transform.baseVal.getItem(0);
  updateClock();
 })()

 function updateClock() {
  var date = new Date();
  var sec = date.getMilliseconds() / 1000 +
    date.getSeconds() +
    date.getMinutes() * 60 +
    date.getHours() * 60 * 60;
  var hourAngle = (sec % secPer12Hours) * 360 / secPer12Hours,
    minuteAngle = (sec % secPerHour) * 360 / secPerHour,
    secondAngle = (sec % secPerMinute) * 360 / secPerMinute;
  hourTransform.setRotate(hourAngle, 125, 125);
  minuteTransform.setRotate(minuteAngle, 125, 125);
  secondTransform.setRotate(secondAngle, 125, 125);
  window.requestAnimationFrame(updateClock);
 }

</script>


浏览器需要支撑:requestAnimationFrame
有关requestAnimationFrame的相关常识请自行查阅

文章评论

热门栏目

XML 地图 | Sitemap 地图