上帝之手：给CSS驱动的数字盘时钟推一把力

马黑黑 · 发表于 2022-3-20 13:59

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-3-20 14:01 编辑

马黑黑 · 发表于 2022-3-20 14:01

全部代码：

<style type="text/css">
.numClock {
margin: auto;
width: 20em;
height: 20em;
background: rgba(240, 248, 255, .6);
border: 1.2em solid #2f4f4f;
border-radius: 50%;
position: relative;
}
.numClock::before {
content: "CHUACHAO";
position: absolute;
width: 100%;
text-align: center;
top: 70%;
}
.numBox {
position: absolute;
width: 1.5em;
height: 1.5em;
font-family: 'Microsoft Yahei', Sans-Seri;
font-size: 1.5em;
left: calc(50% - 0.75em);
top: calc(50% - 0.75em);
background: transparent;
text-align:center;
}
.numBox span { display: inline-block; }
.hHand,  .mHand,  .sHand { position: absolute; width: 100%; height: 100%; background: transparent;}
.hr-hand, .min-hand,  .sec-hand {
position: absolute;
bottom: 50%;
transform-origin: 50% 100%;
}
.hr-hand {
background: #2f4f4f;
width: 0.4em;
height: 30%;
left: calc(50% - 0.2em);
animation: tRun 43200s linear infinite;
}
.hr-hand::after {
content: "";
position: absolute;
width: 0; height: 0;
border: 0.5em solid;
border-color: transparent transparent #2f4f4f transparent;
right: -0.3em;
bottom: 100%;
}
.min-hand {
background: #2f4f4f;
width: 0.3em;
height: 42%;
left: calc(50% - 0.15em);
animation: tRun 3600s linear infinite;
}
.sec-hand {
background: #d00;
width: 0.2em;
height: 48%;
left: calc(50% - 0.1em);
border-radius: 60% 60% 20% 20%;
animation: tRun 60s linear infinite;
}
.sec-hand::before {
content: "";
position: absolute;
bottom: -0.3em;
left: -0.3em;
width: 0.8em;
height: 0.8em;
border-radius: 50%;
background: red;
}
@keyframes tRun { to { transform: rotate(1turn);  } }
</style>

<div class="numClock">
<div class="hHand">
<div class="hr-hand"></div>
</div>
<div class="mHand">
<div class="min-hand"></div>
</div>
<div class="sHand">
<div class="sec-hand"></div>
</div>
</div>

<script language="javascript">

var now = new Date();
var hr = now.getHours() > 12 ? now.getHours() - 12 : now.getHours(),
min = now.getMinutes(),
sec = now.getSeconds(),
msec = now.getMilliseconds();
var hDeg = hr * 30 + (min * 6 / 12),
mDeg = min * 6 + (sec * 6 / 60),
sDeg = sec * 6 + (msec * 0.36 / 1000);

addNum();
godPush("hHand", hDeg);
godPush("mHand", mDeg);
godPush("sHand", sDeg);

function godPush(ele, deg) {
document.querySelector("." + ele).style.transform = "rotate(" + deg + "deg)";
}

function addNum() {
var nStr = "";
for(j=0;  j<12;  j++) {
nStr += "<div class='numBox' style='transform: rotate(" + j*30 + "deg) translateY(-5.8em);'><span style='transform: rotate(-" + j*30 + "deg);'>" + (j == 0 ? "12" : j) + "</span></div>";
}
document.querySelector(".numClock").innerHTML = nStr + document.querySelector(".numClock").innerHTML;
}
</script>

马黑黑 · 发表于 2022-3-20 14:09

本帖最后由马黑黑于 2022-3-20 20:32 编辑

现在，数字盘时钟按访问者设备的时钟运行，设备的时钟准确它就准确。

当然，如之前已经提到的，CSS驱动的时钟是否经得起严格的考验，得看CSS运行机制的精准度，它壮硕、精准，我们的数字盘时钟就没问题。

当然，如果有问题，比如误差大，我们还是有办法处理的。比方说，假如每隔一个钟就会存在肉眼可察觉的误差，那么，我们可以设定一个 setInterval 定时器，每隔一段时间就给它推一把力：

setInterval(godPush, 60000);

godPush 是演示例子中的自定义函数，就是它给时钟校准时间。