背景与时钟的关系：为什么

马黑黑

樵歌

变色电子时钟网络版，黑黑出品必定精品。

马黑黑

樵歌 发表于 2022-3-23 11:40
变色电子时钟网络版，黑黑出品必定精品。

还木有最终修饰

樵歌

马黑黑 发表于 2022-3-23 12:04
还木有最终修饰

已经很棒 了

马黑黑

樵歌 发表于 2022-3-23 13:51
已经很棒 了

红影

带数字也带刻度的，漂亮

红影

这个底板变色咋弄的，没看到有颜色设置啊

马黑黑

红影 发表于 2022-3-23 15:49
这个底板变色咋弄的，没看到有颜色设置啊

HTML代码里将其设置为透明色，好让打开时看不到底板，可以先一睹时钟的芳容。然后，由JS控制底板的背景色，每两秒钟更换一次底色

红影

马黑黑 发表于 2022-3-23 17:53
HTML代码里将其设置为透明色，好让打开时看不到底板，可以先一睹时钟的芳容。然后，由JS控制底板的背景色 ...

这个JS厉害了，自动更换了那么多颜色的。

马黑黑

红影 发表于 2022-3-23 19:27
这个JS厉害了，自动更换了那么多颜色的。

无尽模式

红影

马黑黑 发表于 2022-3-23 19:44
无尽模式

太厉害了

马黑黑

红影 发表于 2022-3-23 22:17
太厉害了

这个模式得益于定时器

马黑黑

定稿代码：

<style type="text/css">

.numClock {
        margin: auto;
        display: flex;
        justify-content: center;
        width: 320px;
        height: 320px;
        background: rgba(0, 0, 200, .45);
        border: 20px solid rgba(1, 1, 1, .6);
        border-radius: 50%;
        font: 16px sans-Serif;
        color: #111;
        text-shadow: 1px 1px 2px #aaa;
        position: relative;
}
.numClock div { position: absolute; }
.numClock::before {
        content: attr(data-1);
        width: 100%;
        text-align: center;
        top: 70%;
        position: absolute;
}
.numClock::after {
        content: attr(data-2);
        width: 100%;
        text-align: center;
        white-space: pre-wrap;
        top: 25%;
        position: absolute;
}
.numBox, .kedu {
        width: 36px;
        height: 36px;
        font-size: 24px;
        background: transparent;
        text-align:center;
        transform-origin: 50% 159.6px;
}

.numBox span { display: inline-block; }

.kedu {
        width: 4px;
        height: 4px;
        box-shadow: 1px 1px 1px #aaa;
        background: rgba(0, 0, 0, .8);
}
.hHand,  .mHand,  .sHand { position: absolute; width: 100%; height: 100%; background: transparent; z-index: 100;}

.hr-hand, .min-hand,  .sec-hand {
        bottom: 50%;
        transform-origin: 50% 100%;
        box-shadow: 1px 1px 0px #999;
}

.hr-hand {
        background: #CBF03E;
        width: 6px;
        height: 30%;
        left: calc(50% - 3px);
        animation: tRun 43200s linear infinite;
}

.hr-hand::after {
        content: "";
        width: 0; height: 0;
        border: 8px solid;
        border-color: transparent transparent #CEF03E transparent;
        right: -4.8px;
        bottom: 100%;
        position: absolute;
}

.min-hand {
        background: #CDF351;
        width: 4.8px;
        height: 42%;
        left: calc(50% - 2.4px);
        animation: tRun 3600s linear infinite;
}

.sec-hand {
        background: #d00;
        width: 2px;
        height: 48%;
        left: calc(50% - 1px);
        border-radius: 60% 60% 20% 20%;
        animation: tRun 60s linear infinite;
}

.sec-hand::before {
        content: "";
        bottom: -4.8px;
        left: -4px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: red;
        position: absolute;
}

@keyframes tRun { to { transform: rotate(1turn);  } }


</style>

<div id="wai" style="margin: auto; width: 360px; height: 360px; background: transparent; border-radius: 50%; box-shadow: 1px 1px 2px rgba(2,2,2,.3);">
        <div class="numClock" data-1="HUACHAO" data-2="">
                <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>
</div>

<script language="javascript">
var dayStr = "日一二三四五六";
var now = new Date();
var        hr = now.getHours() > 12 ? now.getHours() - 12 : now.getHours(),
             min = now.getMinutes(),
        sec = now.getSeconds(),
        msec = now.getMilliseconds(),
        yy = now.getFullYear() + "年",
        mm = (now.getMonth() + 1) + "月",
        dd = now.getDate() + "日",
        dw = "\r\n星期" + dayStr.charAt(now.getDay());
        var        hDeg = hr * 30 + (min * 6 / 12),
        mDeg = min * 6 + (sec * 6 / 60),
        sDeg = sec * 6 + (msec * 0.36 / 1000);

document.querySelector(".numClock").attributes[2].value = yy + mm + dd + dw;
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<60; j++) {
                if(j%5 == 0) {
                        nStr += "<div class='numBox' style='transform: rotate(" + j*6 + "deg);'><span style='transform: rotate(-" + j*6 + "deg);'>" + (j == 0 ? "12" : j/5) + "</span></div>" ;
                        nStr += "<div class='numBox kedu' style='background: #D6FE5F; transform: rotate(" + j*6 + "deg);'></div>";
                } else {
                        nStr += "<div class='numBox kedu' style='transform: rotate(" + j*6 + "deg);'></div>";
                }
        }
        document.querySelector(".numClock").innerHTML = nStr + document.querySelector(".numClock").innerHTML;
}

setInterval(function() {
        var r = Math.floor(Math.random() * 256),
                g = Math.floor(Math.random() * 256),
                b = Math.floor(Math.random() * 256),
                bgColor = "rgba(" + r + "," + b + "," + b + ", .6)";
                console.log(bgColor);
        document.getElementById('wai').style.backgroundColor = bgColor;
}, 2000);

</script>

红影

马黑黑 发表于 2022-3-23 22:33
这个模式得益于定时器

那个JS里的随机数挺难理解的。

红影

哇，你现在把那个底版颜色变化弄到表盘里去了。现在这个是最后的完美时钟了

红影

而且表盘的外边框也会随底版颜色发生变化。这个太完美了

马黑黑

红影 发表于 2022-3-24 10:15
而且表盘的外边框也会随底版颜色发生变化。这个太完美了

知道原因木有

红影

马黑黑 发表于 2022-3-24 12:15
知道原因木有

是透明度的原因吧。

马黑黑

红影 发表于 2022-3-24 20:42
是透明度的原因吧。

对极

红影

马黑黑 发表于 2022-3-24 21:50
对极

设计很巧妙。