普陀申木 发表于 2024-10-29 13:35

网购一台客厅挂钟

<style>
        #papa {margin:

        MARGIN-LEFT:100px;margin-top: 30px;
        width: 387px;
        height: 463px;
        background: url('https://pic.imgdb.cn/item/67205e20d29ded1a8cda2e50.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))); } }
.ipic { position: absolute; bottom: 0; transform: skew(-3deg);transform-origin: 0% 0%;}
        .ipic:nth-of-type(1) { left: -10px; bottom: 20px; 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="387" height="463" viewBox="-192 -173 400 400">
                <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/67205e20d29ded1a8cda2e3a.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-10-29 14:32

这台挂钟不错。{:4_199:}

红影 发表于 2024-10-29 14:55

哇，这个好，清爽漂亮，时间也是对应的。
给普陀申木老师点赞{:4_199:}

小辣椒 发表于 2024-10-29 21:56

这个挂钟做的真漂亮，我也是做了一个挂钟没有这个漂亮的，都不敢发{:4_173:}

小辣椒 发表于 2024-10-29 21:56

感谢老师精彩的分享{:4_187:}
页: [1]
查看完整版本: 网购一台客厅挂钟