使用JavaScript怎么实现一个网页时钟特效

本篇文章为大家展示了使用JavaScript怎么实现一个网页时钟特效，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

<!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怎么实现一个网页时钟特效

相关推荐