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

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

本帖最后由 马黑黑 于 2022-3-20 14:01 编辑 <br /><br /><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: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 是演示例子中的自定义函数，就是它给时钟校准时间。

红影 发表于 2022-3-20 20:27

黑黑辛苦了，这个时钟非常完美，太赞了{:4_199:}

马黑黑 发表于 2022-3-20 20:29

红影 发表于 2022-3-20 20:27
黑黑辛苦了，这个时钟非常完美，太赞了
跟俺家的时钟差不多，俺丫头第一回看见这个，就说，爸你咋把我们家的时钟拍成这个样子，严重有色差呀，爸你是不是要换手机呀，换的话我帮你埋单{:4_170:}

红影 发表于 2022-3-21 11:45

马黑黑 发表于 2022-3-20 20:29
跟俺家的时钟差不多，俺丫头第一回看见这个，就说，爸你咋把我们家的时钟拍成这个样子，严重有色差呀，爸 ...

哈哈，直接当自己家的时钟了，说明黑黑模拟得十分神似呢，厉害，太厉害了{:4_199:}

马黑黑 发表于 2022-3-21 12:42

红影 发表于 2022-3-21 11:45
哈哈，直接当自己家的时钟了，说明黑黑模拟得十分神似呢，厉害，太厉害了

本来想颜色也要一样的，后来就随意了

红影 发表于 2022-3-21 18:36

马黑黑 发表于 2022-3-21 12:42
本来想颜色也要一样的，后来就随意了

现在这个配色很不错的{:4_187:}

马黑黑 发表于 2022-3-21 19:53

红影 发表于 2022-3-21 18:36
现在这个配色很不错的

还行

红影 发表于 2022-3-21 20:21

马黑黑 发表于 2022-3-21 19:53
还行

挺喜欢这个配色，所以做的帖子里把这个配色套用过去了{:4_173:}

马黑黑 发表于 2022-3-21 22:49

红影 发表于 2022-3-21 20:21
挺喜欢这个配色，所以做的帖子里把这个配色套用过去了

不错的

红影 发表于 2022-3-22 11:14

马黑黑 发表于 2022-3-21 22:49
不错的

空了我再试试看配点别的颜色，会有什么效果{:4_173:}

加林森 发表于 2022-3-22 11:26

好漂亮的时钟啊，老黑真厉害。跟到学习。{:4_190:}

马黑黑 发表于 2022-3-22 12:00

加林森 发表于 2022-3-22 11:26
好漂亮的时钟啊，老黑真厉害。跟到学习。

这个，代码流有些复杂，希望能弄懂

马黑黑 发表于 2022-3-22 12:04

红影 发表于 2022-3-22 11:14
空了我再试试看配点别的颜色，会有什么效果

颜色有很多学问，可以不断尝试

加林森 发表于 2022-3-22 12:13

马黑黑 发表于 2022-3-22 12:00
这个，代码流有些复杂，希望能弄懂

慢慢看，慢慢研究，我会学会的。谢谢老黑。{:4_190:}

红影 发表于 2022-3-22 16:47

马黑黑 发表于 2022-3-22 12:04
颜色有很多学问，可以不断尝试

越看越觉得这个数字的钟盘好美{:4_187:}

马黑黑 发表于 2022-3-22 18:15

红影 发表于 2022-3-22 16:47
越看越觉得这个数字的钟盘好美

嗯，不要刻度也挺好的。我还给这个数字盘时钟加上了刻度，我再改改颜色啥的，弄好后再发上来

红影 发表于 2022-3-22 20:43

马黑黑 发表于 2022-3-22 18:15
嗯，不要刻度也挺好的。我还给这个数字盘时钟加上了刻度，我再改改颜色啥的，弄好后再发上来

黑黑辛苦了{:4_187:}

马黑黑 发表于 2022-3-22 20:51

红影 发表于 2022-3-22 20:43
黑黑辛苦了
不是啊，我在尝试的，是圆周布局与参与布局元素的关系，这个问题一直很抽象，我看了很多案例，从案例中可以看得出原理大家都懂，细节处理却不是最简洁的
页: [1] 2 3 4
查看完整版本: 上帝之手：给CSS驱动的数字盘时钟推一把力