Js版带表盘的时钟

最新推荐文章于 2022-06-09 19:13:14 发布

java_zhaoyanli

最新推荐文章于 2022-06-09 19:13:14 发布

阅读量1.7k

点赞数

分类专栏： WEB-DOM

本文链接：https://blog.csdn.net/java_zhaoyanli/article/details/50959289

版权

WEB-DOM 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

html：

<span style="font-size:18px;"><!DOCTYPE html>
<html>
 <head>
  <title>Js版带表盘的时钟</title>
  <meta charset="utf-8"/>
  <link rel="Stylesheet" href="css/4_2.css"/>
  <script src="js/4_2.js"></script>
 </head>
 <body>
  <div id="clock">
	<div id="h"></div>
	<div id="m"></div>
	<div id="s"></div>
	<div id="a1">I</div>
	<div id="a2">II</div>
	<div id="a3">III</div>
	<div id="a4">IIII</div>
	<div id="a5">V</div>
	<div id="a6">VI</div>
	<div id="a7">VII</div>
	<div id="a8">VIII</div>
	<div id="a9">IX</div>
	<div id="a10">X</div>
	<div id="a11">XI</div>
	<div id="a12">XII</div>
  </div>
 </body>
</html>
</span>

js:

<span style="font-size:18px;">//1 任务: 每隔一秒计算三个指针旋转的角度
function rotate(){
  var now=new Date();//获得当前时间，保存在now中
  var s=now.getSeconds();//获得now的s
  var sDeg=6*s;//求秒针旋转的角度sDeg
  var m=now.getMinutes();//获得now的m
  var mDeg=6*(m+s/60);//求分针旋转的角度mDeg
  var h=now.getHours();//获得now的h
  h>12&&(h-=12);//将h换算成12小时制
  var hDeg=(m/60+s/3600+h)*30;//求时针旋转的角度hDeg
  //找到id为s的div，设置其style中的transform属性为:
  document.getElementById("s").style.transform=
    "rotate("+sDeg+"deg)";
  //找到id为m的div，设置其style中的transform属性为:
  document.getElementById("m").style.transform=
    "rotate("+mDeg+"deg)";
  //找到id为h的div，设置其style中的transform属性为:
  document.getElementById("h").style.transform=
    "rotate("+hDeg+"deg)";
}
window.οnlοad=function(){
  rotate();
  setInterval(rotate,1000);
}</span>