【定时玩手机】套用黑黑老师时钟代码
本帖最后由 梦江南 于 2024-10-13 10:05 编辑 <br /><br /><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);
}
};
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>
求助，图片为什么不会向左过去？{:4_201:} 梦江南 发表于 2024-10-12 15:37
求助，图片为什么不会向左过去？
要设置定位啊，这个没定位，当然没法自动过去啊{:4_173:} 红影 发表于 2024-10-12 16:05
要设置定位啊，这个没定位，当然没法自动过去啊
您说的是时钟定位吗？ 梦江南 发表于 2024-10-12 16:07
您说的是时钟定位吗？
不是啊，是整个帖子的定位。也就是父元素的。 https://dingyue.ws.126.net/2019/1117/f41c4906g00q12n55001ic200hs00hsg00hs00hs.gif 梦江南 发表于 2024-10-12 15:37
求助，图片为什么不会向左过去？
在 #papa {position: relative; …………………………}
加上就行了 起个网名好难 发表于 2024-10-12 16:28
在 #papa {position: relative; …………………………}
加上就行了
加了也没用啊 红影 发表于 2024-10-12 16:20
不是啊，是整个帖子的定位。也就是父元素的。
爸爸处不是- 591px了吗？怎么就不能向左。 梦江南 发表于 2024-10-12 16:52
爸爸处不是- 591px了吗？怎么就不能向左。
看看下一句
#papa {margin: 30px; text-align:center; }，它只认后面的啊，这句在，前面设置多少都没用呢{:4_173:} 红影 发表于 2024-10-12 17:00
看看下一句
#papa {margin: 30px; text-align:center; }，它只认后面的啊，这句在，前面设置多少都没 ...
这句代码是黑黑老师的时钟代码，可以不要？ 红影 发表于 2024-10-12 17:00
看看下一句
#papa {margin: 30px; text-align:center; }，它只认后面的啊，这句在，前面设置多少都没 ...
拿掉了这句代码，帖子过去了，时钟也过去了{:4_201:} 这个时钟太好了，给我吧。{:4_189:} 梦油 发表于 2024-10-12 17:19
这个时钟太好了，给我吧。
问好梦油老师，这个时钟很准的。 红影 发表于 2024-10-12 17:00
看看下一句
#papa {margin: 30px; text-align:center; }，它只认后面的啊，这句在，前面设置多少都没 ...
#papa { margin: -150px; text-align:center; } 时钟回来了。 梦江南 发表于 2024-10-12 16:45
加了也没用啊
不是偏过来了吗， 偏得不够是因为那 -591 略小了点，改为 595 或干脆 600 再看看 梦江南 发表于 2024-10-12 17:07
拿掉了这句代码，帖子过去了，时钟也过去了
text-align:center;就是让时钟居中的
帖子居中应该是margin: 150px 0 10px calc(50% - 595px);
595 = 1028 / 2 + 81 梦江南 发表于 2024-10-12 17:03
这句代码是黑黑老师的时钟代码，可以不要？
这个代码我还没仔细去看。。。 梦江南 发表于 2024-10-12 17:07
拿掉了这句代码，帖子过去了，时钟也过去了
我猜是合并两句papa语句，text-align:center;还是要留着的{:4_173:} 梦江南 发表于 2024-10-12 17:28
#papa { margin: -150px; text-align:center; } 时钟回来了。
偏的量还不够{:4_173:}