【动画制作】祝你周六快乐！（精美代码座钟） - 第2页 - 动画音画 - 花潮论坛

夕阳黄昏 发表于 2024-11-16 20:15

本帖最后由夕阳黄昏于 2024-11-16 20:18 编辑 <br /><br />秋思梦景发表于 2024-11-16 19:04
问候老师好！感谢您欣鼓励和支持！但是不知什么原因遮住评分。

<style>
#papa { text-align:center;width:840px;position:relative;background-color:lightgray;}
#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: cyan; user-select: none; }
@keyframes turning { from { transform: rotate(var(--begin)); } to { transform: rotate(calc(360deg + var(--begin))); } }
#clock{position:absolute;top:115px;left:263px;}
</style>

<div id="papa">
<img src="https://cccimg.com/view.php/f0c33158b44b682a5247743fe976aef0.gif"/>
<svg id="clock" width="300" height="300" 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>
</defs>
<circle cx="0" cy="0" r="95" fill="dimgray" stroke="url(#bg)" stroke-width="10" />
<g id="kedu">
<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="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>
<img src="https://cccimg.com/view.php/b574f0b82ab9e960c3209b6f828825ab.gif"/>
<audio src="https://www.kumeiwp.com/wj/142845/2023/04/03/498dd0eb49795f7858477ab28fde0aac.mp3" autoplay loop />
</div>

<script>
setAttr = (elm, objData) => {
for(var key in objData) {
elm.setAttribute(key, objData);
}
};

mkScale = (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;
kedu.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'});
kedu.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);
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();
}, 60000 - sDateS - sDateMs);
};

mkScale();
setTime();
setDate();
</script>

<style>
#papa { text-align:center;width:840px;position:relative;background-color:lightgray;}
#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: cyan; user-select: none; }
@keyframes turning { from { transform: rotate(var(--begin)); } to { transform: rotate(calc(360deg + var(--begin))); } }
#clock{position:absolute;top:115px;left:263px;}
</style>

<div id="papa">
<img src="https://cccimg.com/view.php/f0c33158b44b682a5247743fe976aef0.gif"/>
<svg id="clock" width="300" height="300" 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>
</defs>
<circle cx="0" cy="0" r="95" fill="dimgray" stroke="url(#bg)" stroke-width="10" />
<g id="kedu">
<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="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>
<img src="https://cccimg.com/view.php/b574f0b82ab9e960c3209b6f828825ab.gif"/>
<audio src="https://www.kumeiwp.com/wj/142845/2023/04/03/498dd0eb49795f7858477ab28fde0aac.mp3" autoplay loop />
</div>

<script>
setAttr = (elm, objData) => {
for(var key in objData) {
elm.setAttribute(key, objData);
}
};

mkScale = (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;
kedu.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'});
kedu.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);
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();
}, 60000 - sDateS - sDateMs);
};

mkScale();
setTime();
setDate();
</script>

醉美水芙蓉 发表于 2024-11-17 07:11

红影发表于 2024-11-17 13:20

秋思梦景发表于 2024-11-16 19:03
问候老师好！感谢您欣鼓励和支持！但是不知什么原因遮住评分。

应该是代码里空间撑开不够？去看了一下，修改后把钟座弄得看不到了呢{:4_203:}

页: 1 [2]

花潮论坛's Archiver