学习贴时钟播放器
本帖最后由 醉美水芙蓉 于 2024-10-10 21:51 编辑 <br /><br /> <style>#tz { margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/2da549a9ba5cb8e16d70aae6e819a3dd.mp4.jpg') no-repeat center/105% 105%; box-shadow: 4px 4px 8px #00000080; z-index: 1; display: grid; place-items: center; animation: chgsize 5s linear alternate infinite var(--state); position: relative; }
#clock { position: absolute;left: 320px; top: 100px;filter: drop-shadow(0 0 2px black); }
#minHand, #secHand { animation: rot var(--tt) linear infinite var(--state); }
#line { transition: .5s; }
@keyframes rot { to { transform: rotate(1turn); } }
@keyframes chgsize { to { background-size: 100% 100%; } }
</style>
<div id="tz">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2097788346" autoplay loop></audio>
<svg id="player" width="200" height="200" viewBox="-100 -100 200 200">
<title id="ctt">play</title>
<defs>
<style>
#hHand, #mHand, #sHand { animation: turning var(--dur) linear infinite; }
#hHand { --begin: 0deg; --dur: 216000s; }
#mHand { --begin: 0deg; --dur: 3600s; }
#sHand { --begin: 0deg; --dur: 60s; }
#kedu {
font: normal 16px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-anchor: middle;
dominant-baseline: middle;
fill: red;
user-select: none;
}
@keyframes turning {
from { transform: rotate(var(--begin)); }
to { transform: rotate(calc(360deg + var(--begin))); }
}
</style>
<div style="margin: 30px; text-align:center;">
<svg id="clock" width="200" height="200" viewBox="-100 -100 200 200">
<defs>
<linearGradient id="bg" 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>
<path id="tpath" d="M-85 0 A85 85 0 1 1 85 0 A85 85 0 1 1 -85 0" />
</defs>
<circle cx="0" cy="0" r="95" fill="skyblue" stroke="url(#bg)" stroke-width="10" />
<g id="kedu">
<text font-size="14" fill="white" 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="hHand" x1="0" y1="0" x2="0" y2="-65" stroke="whitesmoke" stroke-width="4" />
<line id="mHand" x1="0" y1="0" x2="0" y2="-75" stroke="snow" stroke-width="3" />
<line id="sHand" 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>
mkScale = (total=60) => {
let deg = 360 / total;
Array(total).fill('').forEach((l,k) => {
let w = -6;
if(k % 5 === 0) {
let t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
t.setAttribute('transform', `rotate(${deg * k - 60} 0 0) translate(75) rotate(${-1 * (deg * k - 60)} 0 0)`);
t.textContent = k / 5 + 1;
kedu.appendChild(t);
w = -4;
}
l = document.createElementNS('http://www.w3.org/2000/svg', 'line');
l.setAttribute('transform', `rotate(${deg * k - 60} 0 0) translate(90)`);
l.setAttribute('x1', '0');
l.setAttribute('y1', '0');
l.setAttribute('x2', w);
l.setAttribute('y2', '0');
l.setAttribute('stroke', 'teal');
kedu.appendChild(l);
});
};
setTime = () => {
let now = new Date();
let hr = now.getHours() > 12 ? now.getHours() - 12 : now.getHours(),
min = now.getMinutes(),
sec = now.getSeconds(),
msec = now.getMilliseconds();
let hDeg = hr * 30 + (min * 6 / 12),
mDeg = min * 6 + (sec * 6 / 60),
sDeg = sec * 6 + (msec * 0.36 / 1000);
hHand.style.setProperty('--begin', hDeg + 'deg');
mHand.style.setProperty('--begin', mDeg + 'deg');
sHand.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();
}, 3600000 - sDateS - sDateMs);
};
mkScale();
setTime();
setDate();
</script>
</div>
<script>
mState = () => {
tz.style.setProperty('--state', aud.paused ? 'paused' : 'running');
ctt.textContent = aud.paused ? '点击播放' : '点击暂停';
}
aud.oncanplaythrough = () => {
minHand.style.setProperty('--tt', `${aud.duration}s`);
secHand.style.setProperty('--tt', `${aud.duration / 10}s`);
};
aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => line.setAttribute('transform', `rotate(${Math.random() * 720})`);
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script> 水芙蓉美女这么快就做到帖子里了，厉害。
时钟位置好像放墙上比较好，这个好像在床的上方呢{:4_173:} 欣赏水芙蓉美女好帖{:4_187:} 漂亮 红影 发表于 2024-10-9 22:35
水芙蓉美女这么快就做到帖子里了，厉害。
时钟位置好像放墙上比较好，这个好像在床的上方呢
不知道怎么移动了？好像定位了，怎么都不能移动？ 马黑黑 发表于 2024-10-9 23:12
漂亮
黑黑老师时钟为啥不能移动？加了代码还是再原来位置？ 醉美水芙蓉 发表于 2024-10-9 23:33
黑黑老师时钟为啥不能移动？加了代码还是再原来位置？
你需要在CSS里设置 svg 的样式，它的 id 是 clock，要加一个 ：
#clock { position: absolute; left: 20px; top: 20px; } 醉美水芙蓉 发表于 2024-10-9 23:32
不知道怎么移动了？好像定位了，怎么都不能移动？
看7楼，黑黑给出答案了{:4_173:} 马黑黑 发表于 2024-10-9 23:44
你需要在CSS里设置 svg 的样式，它的 id 是 clock，要加一个 ：
#clock { position: absolute; left:...
谢谢黑黑老师！已改好了！ 红影 发表于 2024-10-10 19:37
看7楼，黑黑给出答案了
谢谢红影美女！已改好了！ 醉美水芙蓉 发表于 2024-10-10 21:52
谢谢黑黑老师！已改好了！
我不知道你知道不知道将源码的外层div去掉 马黑黑 发表于 2024-10-10 21:55
我不知道你知道不知道将源码的外层div去掉
呀！黑黑老师我是瞎玩的，不太懂代码！ 马黑黑 发表于 2024-10-10 21:55
我不知道你知道不知道将源码的外层div去掉
老师是说有多余代码？ 醉美水芙蓉 发表于 2024-10-10 21:52
谢谢红影美女！已改好了！
嗯嗯，这个位置感觉好多了{:4_187:} 醉美水芙蓉 发表于 2024-10-10 22:16
老师是说有多余代码？
不是这个意思。我的意思是，在使用的时候，应去掉外层div，要么也可以不设置svg的CSS，而是直接处理外层div的尺寸和位置 醉美水芙蓉 发表于 2024-10-10 22:14
呀！黑黑老师我是瞎玩的，不太懂代码！
至少要懂点代码的逻辑关系。你用的东东放在哪、如何控制（位置、尺寸等等）
页:
[1]