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

修了一只怀表

        <style>
        #papa {margin:

        MARGIN-LEFT:100px;margin-top: 30px;
        width: 297px;
        height: 287px;
        background: url('https://pic.imgdb.cn/item/671c39ced29ded1a8ca7185d.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="-235 -275 651 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>

<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-10-29 14:15

老师是用PS修出来的吗？

普陀申木 发表于 2024-10-29 14:24

AI抠图和PS混合使用做好算数。

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

这个好漂亮，只是时间不是对应的呢{:4_173:}

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

普陀申木 发表于 2024-10-29 14:24
AI抠图和PS混合使用做好算数。

很有创意，给普陀申木老师点赞{:4_199:}

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

漂亮的怀表制作{:4_199:}

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

这个指针还可以缩短一点会更加漂亮
页: [1]
查看完整版本: 修了一只怀表