站长网_站长创业_站长主页_站长之家_易采站长站

会员投稿 投稿指南 站长资讯通告: JS实现网页时钟特效
搜索:
您的位置: 主页 > 教程 > 网页编程 > JavaScript > » 正文

JS实现网页时钟特效

来源: 易采站长站

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

主要逻辑 根据JS 的Date属性 求得当前的 时 分 秒 之后,按照 360/(时|分|秒)  来对三个指针元素进行旋转

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 #box {
  width: 600px;
  height: 600px;
  /*border: 1px solid #000;*/
  background: url("img/bg.png") no-repeat;
  background-size: cover;
  margin: 30px auto;
  position: relative;
  overflow: hidden;
 
 }
 #h{
  width:100%;
  height:100%;
  background: url("img/h.png") no-repeat;
  background-size: cover;
  position: absolute;
 }
 #m{
  width:100%;
  height:100%;
  background: url("img/m.png") no-repeat;
  background-size: cover;
  position: absolute;
 }
 #s{
  width:100%;
  height:100%;
  background: url("img/s.png") no-repeat;
  background-size: cover;
  position: absolute;
 }
 </style>
</head>
<body>
 <div id="box">
 <div id="h"></div>
 <div id="m"></div>
 <div id="s"></div>
 </div>
 
 <script>
 window.onload = function(){
  // 1:找到三个元素标签
  var h = document.getElementById("h"); //时
  var m = document.getElementById("m"); //分
  var s = document.getElementById("s"); //秒
 
  setInterval(function(){
  var date = new Date();
  var HH = (date.getHours()%12);
  var MM = date.getMinutes();
  var SS = date.getSeconds();
  h.style.transform = "rotate("+(HH*30)+"deg)";
  m.style.transform = "rotate("+(MM*6)+"deg)";
  s.style.transform = "rotate("+(SS*6)+"deg)";
  },1000)
 }
 </script>
</body>
</html>

更多JavaScript时钟特效点击查看:JavaScript时钟特效专题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持易采站长站。

最新图文资讯
1 2 3 4 5 6
易采站长站 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助 -