如何实现一只手表（源代码）

mazzz

2024 年 09 月 10 日

502 次浏览

暂无评论

3152字数

建站

2024-10-03T11:06:58.png

演示：http://blog.mazzz.cc/h5/shoubiao.html

源代码


<head>
    <meta charset="UTF-8" />
    <title>
        手表
    </title>
    <style>
        .watch { --watch-color: white; --screen-color: black; font-size: 4.5vmin;
        font-family: monospace; color: #fff; padding: 2em 1.5em; border: 2px solid
        var(--watch-color); border-radius: 2em; box-shadow: inset 0 0 0 0.5em black,
        inset 0 0 1rem 1em hsl(0 0% 100% / 0.25); background-color: var(--screen-color);
        background-image: linear-gradient( to bottom right, #fff0 50%, hsl(0 0%
        100% / 0.25) ); position: relative; } .watch::before, .watch::after { content:
        ''; position: absolute; background-color: var(--watch-color); z-index:
        -1; } .watch::after { inset: -0.5em 20%; border-radius: 0.5em; background-image:
        linear-gradient( #fff0, hsl(0 0% 0% / 0.5) 0.5em calc(100% - 0.5em), #fff0
        ); } .watch::before { inset: -50vh 25%; background-image: repeating-linear-gradient(
        #fff0 0 0.3em, hsl(0 0% 0% / 0.125) 0.3em 0.5em, #fff0 0.5em 0.8em ), radial-gradient(circle,
        #fff0, hsl(0 0% 0% / 0.25) 50%); } .keyword { color: #ddca7e; } .def {
        color: #809bbd; } .operator { color: #cccccc; } .property { color: #9a8297;
        } .string { color: #96b38a; } .number { color: #d0782a; } * { box-sizing:
        border-box; } body { margin: 0; padding: 1em; min-height: 100vh; background-color:
        #1d1e22; display: grid; place-items: center; overflow: hidden; }
    </style>
</head>

<body>
    <div class="watch">
    </div>
    <script>
        clock();
        function clock() {
            const date = new Date();
            const indent = 2;
            const clockObj = {
                am_pm: date.getHours() >= 12 ? 'pm': 'am',
                hours: date.getHours() % 12 || 12,
                minutes: date.getMinutes(),
                seconds: date.getSeconds(),
                day: date.toLocaleDateString('en-us', {
                    weekday: 'long'
                }),
                date: date.getDate(),
                month: date.toLocaleDateString('en-us', {
                    month: 'long'
                }),
                year: date.getFullYear(),
            };
            const entryFormat = ([key, val]) = >{
                return`$ {
                    '&nbsp'.repeat(indent)
                } < span class = "property" > $ {
                    key
                } < /span>: ${valFormat(val)}`; }; const valFormat = (val) => { if (typeof val == 'number') return `<span class="number">${val}</span > `;
                else if (typeof val == 'string') return` < span class = "string" > "${val}" < /span>`; }; document.querySelector('.watch').innerHTML = ` <span class="keyword">const</span > <span class = "def" > clock < /span> = {<br> ${Object.entries(clockObj).reduce( (str, entry) => str + entryFormat(entry) + ',<br>', '' )}};`; requestAnimationFrame(clock); } /
    </script>
</body>