<!DOCTYPE html>
<html lang="en">
<head>
???<meta charset="UTF-8">
???<title>时钟</title>
???<style>
???????* {
???????????margin: 0;
???????????padding: 0;
???????}
???????.wrapper {
???????????width: 200px;
???????????height: 200px;
???????????position: relative;
???????????border: 4px solid blueviolet;
???????????border-radius: 50%;
???????}
???????.h {
???????????width: 10px;
???????????height: 80px;
???????????position: absolute;
???????????background: black;
???????????left: 95px;
???????????top: 40px;
???????????/* c3新属性,旋转中心 x ?y */
???????????transform-origin: 50% 60px;
???????????/* x,y以当前div的左上起点为0点 */
???????}
???????.m {
???????????width: 8px;
???????????height: 100px;
???????????position: absolute;
???????????background: yellowgreen;
???????????left: 96px;
???????????top: 20px;
???????????transform-origin: 50% 80px;
???????}
???????.s {
???????????width: 4px;
???????????height: 100px;
???????????position: absolute;
???????????background: red;
???????????left: 98px;
???????????top: 20px;
???????????transform-origin: 50% 80px;
???????}
???????div[class^="a"] {
???????????position: absolute;
???????????width: 20px;
???????????height: 20px;
???????????text-align: center;
???????????top: 0;
???????????left: 90px;
???????????transform-origin: 50% 100px;
???????}
???????.a1 {transform: rotate(30deg);}
???????.a2 {transform: rotate(60deg);}
???????.a3 { transform: rotate(90deg);}
???????.a4 {transform: rotate(120deg);}
???????.a5 {transform: rotate(150deg);}
???????.a6 { transform: rotate(180deg); }
???????.a7 {transform: rotate(210deg);}
???????.a8 { transform: rotate(240deg);}
???????.a9 {transform: rotate(270deg);}
???????.a10 {transform: rotate(300deg);}
???????.a11 {transform: rotate(330deg); }
???????.a12 {transform: rotate(360deg);}
???</style>
</head>
<body>
???<div class="wrapper">
???????<div class="h"></div>
???????<div class="m"></div>
???????<div class="s"></div>
???????<div class="a1">1</div>
???????<div class="a2">2</div>
???????<div class="a3">3</div>
???????<div class="a4">4</div>
???????<div class="a5">5</div>
???????<div class="a6">6</div>
???????<div class="a7">7</div>
???????<div class="a8">8</div>
???????<div class="a9">9</div>
???????<div class="a10">10</div>
???????<div class="a11">11</div>
???????<div class="a12">12</div>
???</div>
???<script>
???????var h = document.querySelector(‘.h‘);
???????var m = document.querySelector(‘.m‘);
???????var s = document.querySelector(‘.s‘);
???????function task() {
???????????// 获取到当前的时间
???????????var now = new Date();
???????????var ss = now.getSeconds();
???????????var sss = ss * 6;
???????????var ms = now.getMinutes();
???????????var mss = (ms*60 + ss)/3600*360;
???????????var hs = now.getHours();
???????????var hss = ((hs*60 + ms)*60 + ss)/(3600*12)*360;
???????????s.style.transform = `rotate(${sss}deg)`;
???????????m.style.transform = `rotate(${mss}deg)`;
???????????h.style.transform = `rotate(${hss}deg)`;
???????}
???????// 起步先调用一次,能够过滤打开页面的一秒停顿,更流畅
???????task();
???????setInterval(task, 1000);
???</script>
</body>
</html>
js原生制作时钟
原文地址：https://www.cnblogs.com/huanxijiuhao/p/9257989.html