【定时玩手机】套用黑黑老师时钟代码

梦江南 · 发表于 2024-10-13 07:17

起个网名好难发表于 2024-10-12 18:16
不是偏过来了吗，偏得不够是因为那 -591 略小了点，改为 595 或干脆 600 再看看

margin: 150px 0 10px calc(50% - 600px)了也没有再过去。还有一个问题，就是把头像压住了，如果再加大点图片就还会往上走。

梦江南 · 发表于 2024-10-13 07:18

起个网名好难发表于 2024-10-12 18:19
text-align:center; 就是让时钟居中的

帖子居中应该是margin: 150px 0 10px calc(50% - 595px);

知道这是居中代码。

梦江南 · 发表于 2024-10-13 07:19

红影发表于 2024-10-12 19:56
这个代码我还没仔细去看。。。

谢谢，给您添麻烦了。

梦江南 · 发表于 2024-10-13 07:21

红影发表于 2024-10-12 20:01
偏的量还不够

#papa { margin: -150px; text-align:center; }这个代码一加大数字，图片就往上走了。

起个网名好难 · 发表于 2024-10-13 08:45

本帖最后由起个网名好难于 2024-10-13 11:33 编辑

梦江南发表于 2024-10-13 07:18 知道这是居中代码。

<style>
#outBlk {
position: relative;
width: 1028px;
height: 700px;
background: #000 url('https://pic.imgdb.cn/item/6709bdaed29ded1a8c3ac037.gif');
box-shadow: 2px 2px 4px #000;
z-index: 1;
margin:100px 0 40px calc(50% - 595px);
overflow: hidden;
border-radius: 32px;
text-align: center;
}
#hourHand,
#minHand,
#secHand {
animation: cycle var(--dur) linear infinite;
}
#hourHand {
--begin: 0deg;
--dur: 216000s;
}
#minHand {
--begin: 0deg;
--dur: 3600s;
}
#secHand {
--begin: 0deg;
--dur: 60s;
}
#scale {
font: normal 16px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-anchor: middle;
dominant-baseline: middle;
fill: cyan;
user-select: none;
}
@keyframes cycle {
from {
transform: rotate(var(--begin));
}
to {
transform: rotate(calc(360deg + var(--begin)));
}
}
</style>
<div id="outBlk">
<svg id="wClock" width="230" height="400" viewBox="-100 -100 200 200">
<defs>
<linearGradient id="bgc" x1="0" x2="1" y1="0" y2="1">
<stop offset="0%" stop-color="red" />
<stop offset="50%" stop-color="green" />
<stop offset="100%" stop-color="navy" />
</linearGradient>
</defs>
<circle cx="0" cy="0" r="95" fill="dimgray" stroke="url(#bgc)" stroke-width="10" />
<g id="scale">
<text font-size="14" fill="silver" text-anchor="middle">
<tspan id="tDate" x="5" y="-35">日期</tspan>
<tspan id="tDay" x="0" y="-15">星期</tspan>
<tspan x="0" y="40" fill="gray">HUACHAO</tspan>
</text>
</g>
<line id="hourHand" x1="0" y1="0" x2="0" y2="-65" stroke="whitesmoke" stroke-width="4" />
<line id="minHand" x1="0" y1="0" x2="0" y2="-75" stroke="snow" stroke-width="3" />
<line id="secHand" x1="0" y1="0" x2="0" y2="-85" stroke="white" stroke-width="2" />
<circle cx="0" cy="0" r="6" fill="red" stroke="white" stroke-width="2" />
</svg>
</div>
<script>
SetAttr = (elm, objData) => {
for (var key in objData) {
elm.setAttribute(key, objData[key]);
}
};
makeScale = (total = 60) => {
var deg = 360 / total;
Array(total).fill('').forEach((l, k) => {
var w = -6;
if (k % 5 === 0) {
var t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
SetAttr(t, {
transform: `rotate(${deg * k - 60} 0 0) translate(75) rotate(${-1 * (deg * k - 60)} 0 0)`
});
t.textContent = k / 5 + 1;
scale.appendChild(t);
w = -4;
}
l = document.createElementNS('http://www.w3.org/2000/svg', 'line');
SetAttr(l, {
transform: `rotate(${deg * k - 60} 0 0) translate(90)`,
x1: 0,
y1: 0,
x2: w,
y2: 0,
stroke: 'cyan'
});
scale.appendChild(l);
});
};
SetTime = () => {
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);
hourHand.style.setProperty('--begin', hDeg + 'deg');
minHand.style.setProperty('--begin', mDeg + 'deg');
secHand.style.setProperty('--begin', sDeg + 'deg');
};
SetDate = () => {
var sDate = new Date();
var sDateS = sDate.getSeconds() * 1000,
sDateMs = sDate.getMilliseconds();
tDate.textContent = `${sDate.getFullYear()}年${sDate.getMonth() + 1}月${sDate.getDate()}日`;
tDay.textContent = `星期${'日一二三四五六'.substr(sDate.getDay(),1)}`;
setTimeout(() => {
SetDate();
}, 60000 - sDateS - sDateMs);
};
makeScale();
SetTime();
SetDate();
</script>
<audio style="width:0px;height:px;" controls="controls" autoplay="autoplay" loop="loop" src="https://music.163.com/song/media/outer/url?id=1365013691.mp3" type="audio/mpeg"></audio>