沙发挂钟可做背景图片

普陀申木 发表于 2024-11-2 08:09

本帖最后由普陀申木于 2024-11-2 08:28 编辑 <br /><br /><style>
#papa {

margin: 30px 0 30px calc(50% - 641px);
width: 1280px;
height: 720px;
background: url('https://pic.imgdb.cn/item/6724ca4bd29ded1a8c7e3ee5.jpg') no-repeat center/cover;

overflow: hidden;
z-index: 1;
position: relative;
}

#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: transparent; user-select: none; }
@keyframes turning { from { transform: rotate(var(--begin)); } to { transform: rotate(calc(360deg + var(--begin))); } }
.ipic { position: absolute; bottom: 0; transform: skew(-3deg);transform-origin: 0% 0%;}
.ipic:nth-of-type(1) { left: 708px; bottom: 255px; animation: skew1 3s infinite linear ;width: 400px; height: 410px;}

.stop .ipic:nth-of-type(1){animation-play-state: paused;}

@keyframes skew1 { 50%{ transform: skew(3deg); } }

</style>

<div id="papa">
<svg id="clock" width="1280" height="263" viewBox="-1272 -220 650 650">
<defs>
<linearGradient id="bg" x1="0" x2="1" y1="0" y2="1">
</linearGradient>
</defs>
<circle cx="0" cy="0" r="85" fill="transparent" stroke="" stroke-width="10" />
<g id="kedu">
<text font-size="14" fill=" " 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="">石英钟</tspan>
</text>
</g>
<line id="hHand" x1="0" y1="0" x2="0" y2="-65" stroke="Black " stroke-width="4" />
<line id="mHand" x1="0" y1="0" x2="0" y2="-75" stroke="Black " stroke-width="3" />
<line id="sHand" x1="0" y1="0" x2="0" y2="-85" stroke="Black " stroke-width="2" />
<circle cx="0" cy="0" r="6" fill="red" stroke="white" stroke-width="2" />
</svg>
<div id="testImg">
<img class="ipic" src="https://pic.imgdb.cn/item/6724ca4bd29ded1a8c7e3ef4.png" alt="" />

</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>
</div>

普陀申木 发表于 2024-11-2 08:18

本帖最后由普陀申木于 2024-11-2 08:30 编辑 <br /><br /><style>
#papa {

MARGIN-LEFT:100px;margin-top: 30px;
width: 297px;
height: 287px;
background: url('https://pic.imgdb.cn/item/6714807cd29ded1a8c1e6f2d.png') no-repeat center/cover;

overflow: hidden;
z-index: 1;
position: relative;
}

#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: transparent; user-select: none; }
@keyframes turning { from { transform: rotate(var(--begin)); } to { transform: rotate(calc(360deg + var(--begin))); } }
</style>

<div id="papa">
<svg id="clock" width="396" height="392" viewBox="-183 -155 450 450">
<defs>
<linearGradient id="bg" x1="0" x2="1" y1="0" y2="1">

</linearGradient>
</defs>
<circle cx="0" cy="0" r="85" fill="transparent" 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">石英钟</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>
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-2 08:23

普陀申木发表于 2024-11-2 08:18
#papa {margin:

MARGIN-LEFT:100px;margin-top: 30px;

欣赏老师挂钟佳作。

普陀申木 发表于 2024-11-2 08:32

红影发表于 2024-11-2 09:45

漂亮的时钟背景。{:4_187:}
这个的显示时间好像不对呢{:4_173:}

小文发表于 2024-11-2 10:30

厉害，好漂亮的钟！喜欢{:4_189:}

小辣椒 发表于 2024-11-2 13:24

自己制作时钟，{:4_199:}

小辣椒 发表于 2024-11-2 13:24

时间代码是不是有错误，现在的时间不准了

页: [1]

花潮论坛's Archiver

沙发挂钟可做背景图片