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

最新下载

js+SVG实现动态时钟效果

时间:2018-07-16 11:46:42 编辑:猪哥 来源:转载

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

js+SVG实现动态时钟效果





Analog Clock
<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>



 
  
    
   
    
    
    
     
    
   
  
   
                 
   
   
   
   
   
   
   
   
   
   
   
   
  
             
   123
   69
  
  
   
   
   
   
  
 

文章评论

热门栏目

XML 地图 | Sitemap 地图