html+js+css打造的高仿苹果时钟组件

给心爱的BdTab插件添加上两款苹果手机的时钟，放在浏览器主页，简直不要太好了啊，
可随意拖动。#创业#
html+js+css打造的高仿

<div style="width: 100vw;height: 100vh;overflow: hidden;">
    <div class="fill">
        <div class="clock" id="utility-clock">
            <div class="centre">
                <div class="dynamic"></div>
                <div class="expand round circle-1"></div>
                <div class="anchor hour">
                    <div class="element thin-hand"></div>
                    <div class="element fat-hand"></div>
                </div>
                <div class="anchor minute">
                    <div class="element thin-hand"></div>
                    <div class="element fat-hand minute-hand"></div>
                </div>
                <div class="anchor second">
                    <div class="element second-hand"></div>
                </div>
                <div class="expand round circle-2"></div>
                <div class="expand round circle-3"></div>
            </div>
        </div>
    </div>
</div>

 var clock = document.querySelector('#utility-clock')
    utilityClock(clock)

    if (clock.parentNode.classList.contains('fill')) {
        autoResize(clock, 295 + 32)
    }

    function utilityClock (container) {
        var dynamic = container.querySelector('.dynamic')
        var hourElement = container.querySelector('.hour')
        var minuteElement = container.querySelector('.minute')
        var secondElement = container.querySelector('.second')
        var minute = function (n) {
            return 0 === n % 5 ? minuteText(n) : minuteLine(n)
        }
        var minuteText = function (n) {
            var anchor = document.createElement('div')
            anchor.className = 'anchor'
            var element = document.createElement('div')
            element.className = 'element minute-line-long'
            rotate(anchor, n)
            anchor.appendChild(element)
            dynamic.appendChild(anchor)
        }
        var minuteLine = function (n) {
            var anchor = document.createElement('div')
            anchor.className = 'anchor'
            var element = document.createElement('div')
            element.className = 'element minute-line'
            rotate(anchor, n)
            anchor.appendChild(element)
            dynamic.appendChild(anchor)
        }
        var hour = function (n) {
            var element = document.createElement('div')
            element.className = 'hour-text hour-' + n
            element.innerHTML = n
            position(element, n / 12, 105)
            dynamic.appendChild(element)
        }
        var position = function (element, phase, r) {
            var theta = phase * 2 * Math.PI
            element.style.top = (-r * Math.cos(theta)).toFixed(1) + 'px'
            element.style.left = (r * Math.sin(theta)).toFixed(1) + 'px'
        }
        var rotate = function (element, second) {
            element.style.transform = element.style.webkitTransform = 'rotate(' + (second * 6) + 'deg)'
        }
        var animate = function () {
            var now = new Date()
            var time = now.getHours() * 3600 + now.getMinutes() * 60 + now.getSeconds() + now.getMilliseconds() / 1000;
            rotate(secondElement, time);
            rotate(minuteElement, time / 60);
            rotate(hourElement, time / 60 / 12);
            requestAnimationFrame(animate);
        }
        for (var i = 1; i <= 60; i++) {
            minute(i);
        }
        for (var i = 1; i <= 12; i++) {
            hour(i);
        }
        animate();
    }

    function autoResize (element, nativeSize) {
        var update = function () {
            var scale = Math.min(window.innerWidth, window.innerHeight) / nativeSize
            element.style.transform = element.style.webkitTransform = 'scale(' + scale.toFixed(3) + ')'
        }
        update();
        window.addEventListener('resize', update)
    }

源码获取方式：

安装BdTab浏览器插件，在右键选项中可以获取完整源码
插件支持Chrome和Edge浏览器