JavaScript仿真数码时钟代码

/**
 * 添加数码管。
 * @param {HTMLElement} root 容器
 * @param {str} height 数码管高度
 * @param {str} color 点亮时颜色
 */
function createDtClock(root, height = '3em', color = '#f00') {
    
    
    var svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 650 1000">' +
        '<polygon points="113.073 100.984 37.445 25.356 62.362 0.439 434.516 0.439 459.432 25.356 383.804 100.984 113.073 100.984" name="23567890"/>' +
        '<polygon points="62.362 999.562 37.445 974.645 113.073 899.015 383.804 899.015 459.432 974.645 434.516 999.562 62.362 999.562" name="2356890"/>' +
        '<polygon points="0.438 936.857 0.438 514.52 100.985 564.793 100.985 886.146 25.356 961.775 0.438 936.857" name="2680"/>' +
        '<polygon points="0.746 63.27 25.356 38.659 100.677 113.981 100.677 435.018 0.746 484.984 0.746 63.27" name="456890"/>' +
        '<polygon points="396.201 435.018 396.201 113.981 471.522 38.659 496.131 63.269 496.131 484.984 396.201 435.018" name="12347890"/>' +
        '<polygon points="396.201 886.02 396.201 564.982 496.131 515.016 496.131 936.73 471.522 961.341 396.201 886.02" name="134567890"/>' +
        '<polygon points="485.409 500 383.986 550.712 112.892 550.712 11.468 500 112.892 449.288 383.986 449.288 485.409 500" name="2345689"/>' +
        '</svg>'
    var colon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 100">' +
        '<circle cx="20" cy="64.58659" r="7.2933" name="24680"/>' +
        '<circle cx="20" cy="35.44204" r="7.2933" name="24680"/>' +
        '</svg>';
    var point = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 100">' +
        '<circle cx="10" cy="92.7067" r="7.2933" name="1234567890"/>' +
        '</svg>';
    root.innerHTML = svg + svg + colon + svg + svg + colon + svg + svg + point + svg + svg + svg;
    let children;
    var init = function () {
    
    
        children = root.children;
        for (let i = 0, len = children.length; i < len; i++)
            children[i].setAttribute('height', height);
    }
    var setFill = function (root, num) {
    
    
        let i = num % 10;
        let children = root.children;
        for (let i1 = 0, len = children.length; i1 < len; i1++) {
    
    
            const c = children[i1];
            let name = c.getAttribute('name');
            if (String(name).indexOf(String(i)) >= 0)
                c.setAttribute('fill', color);
            else
                c.setAttribute('fill', 'transparent');
        }
    }
    setInterval(function () {
    
    
        if (!children) init();
        let now = new Date()
        let hours = now.getHours();
        let sec = now.getSeconds();
        let min = now.getMinutes();
        let mill = now.getMilliseconds();
        setFill(children[0], parseInt(hours / 10));
        setFill(children[1], parseInt(hours % 10));
        setFill(children[2], parseInt(mill / 500));
        setFill(children[3], parseInt(min / 10));
        setFill(children[4], parseInt(min % 10));
        setFill(children[5], parseInt(mill / 500));
        setFill(children[6], parseInt(sec / 10));
        setFill(children[7], parseInt(sec % 10));
        setFill(children[8], parseInt(mill));
        setFill(children[9], parseInt(mill / 100));
        setFill(children[10], parseInt(mill / 10));
        setFill(children[11], parseInt(mill % 10));
    }, 1);
    init();
}