背景与时钟的关系：为什么
本帖最后由 马黑黑 于 2022-3-25 12:24 编辑 <br /><br /><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.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 + "," + g + "," + b + ", .6)";
console.log(bgColor);
document.getElementById('wai').style.backgroundColor = bgColor;
}, 2000);
</script>
变色电子时钟网络版，黑黑出品必定精品。{:4_173:} 樵歌 发表于 2022-3-23 11:40
变色电子时钟网络版，黑黑出品必定精品。
还木有最终修饰 马黑黑 发表于 2022-3-23 12:04
还木有最终修饰
已经很棒 了 樵歌 发表于 2022-3-23 13:51
已经很棒 了
{:5_108:} 带数字也带刻度的，漂亮{:4_187:} 这个底板变色咋弄的，没看到有颜色设置啊{:4_173:} 红影 发表于 2022-3-23 15:49
这个底板变色咋弄的，没看到有颜色设置啊
HTML代码里将其设置为透明色，好让打开时看不到底板，可以先一睹时钟的芳容。然后，由JS控制底板的背景色，每两秒钟更换一次底色 马黑黑 发表于 2022-3-23 17:53
HTML代码里将其设置为透明色，好让打开时看不到底板，可以先一睹时钟的芳容。然后，由JS控制底板的背景色 ...
这个JS厉害了，自动更换了那么多颜色的。 红影 发表于 2022-3-23 19:27
这个JS厉害了，自动更换了那么多颜色的。
无尽模式{:5_106:} 马黑黑 发表于 2022-3-23 19:44
无尽模式
太厉害了{:4_199:} 红影 发表于 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.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里的随机数挺难理解的。 哇，你现在把那个底版颜色变化弄到表盘里去了。现在这个是最后的完美时钟了{:4_199:}{:4_178:} 而且表盘的外边框也会随底版颜色发生变化。这个太完美了{:4_199:} 红影 发表于 2022-3-24 10:15
而且表盘的外边框也会随底版颜色发生变化。这个太完美了
知道原因木有 马黑黑 发表于 2022-3-24 12:15
知道原因木有
是透明度的原因吧。 红影 发表于 2022-3-24 20:42
是透明度的原因吧。
对极 马黑黑 发表于 2022-3-24 21:50
对极
设计很巧妙。
页:
[1]
2