创建[themes]/source/js/custom/digit-clock.js文件，在其中添加如下内容：

// 创建一个包含10个元素的数组，每个元素的值为索引  
var _time10 = Array.from(Array(10)).map((n, i) => i);
// 创建一个包含前6个元素的数组，作为时间的小时和分钟  
var _time6 = _time10.slice(0, 6);
// 创建一个包含前3个元素的数组，作为时间的秒钟  
var _time3 = _time10.slice(0, 3);
// 创建一个包含3个子数组的二维数组，用于表示时钟的结构  
var _Structure = [
    [_time3, _time10],
    [_time6, _time10],
    [_time6, _time10]
];
// 创建一个div元素作为时钟的容器，并设置id为'clock'  
var clock = document.createElement('div');
clock.id = 'clock';
// 将时钟容器添加到元素中元素中  
document.getElementById("digit-clock").appendChild(clock);
// 创建一个数组用于存储每个数字组的div元素  
var digitGroups = [];
// 请求动画帧并调用update函数  
requestAnimationFrame(update);
// 遍历_Structure数组  
_Structure.forEach(digits => {
    // 创建一个div元素作为数字组的容器，并添加类名'digit-group'  
    var digitGroup = document.createElement('div');
    digitGroup.classList.add('digit-group');
    // 将数字组的容器添加到时钟容器中，并将其添加到digitGroups数组中  
    clock.appendChild(digitGroup);
    digitGroups.push(digitGroup);
    // 遍历digits数组  
    digits.forEach(digitList => {
        // 创建一个div元素作为数字的容器，并添加类名'digit'  
        var digit = document.createElement('div');
        digit.classList.add('digit');
        // 遍历digitList数组  
        digitList.forEach(n => {
            // 创建一个div元素作为数字的子元素，并添加类名'digit-number'，设置文本内容为n  
            var ele = document.createElement('div');
            ele.classList.add('digit-number');
            ele.innerText = n;
            // 将数字的子元素添加到数字的容器中  
            digit.appendChild(ele);
        });
        // 将数字的容器添加到数字组的容器中  
        digitGroup.appendChild(digit);
    });
});
// 定义update函数  
function update() {
    // 请求动画帧并调用update函数  
    requestAnimationFrame(update);
    // 创建一个Date对象表示当前时间  
    var date = new Date();
    // 获取当前时间的小时、分钟和秒钟，并将它们转换为两位数的字符串数组  
    var time = [date.getHours(), date.getMinutes(), date.getSeconds()].
        map(n => `0${n}`.slice(-2).split('').map(e => +e)).
        reduce((p, n) => p.concat(n), []);
    // 遍历time数组  
    time.forEach((n, i) => {
        var digit = digitGroups[Math.floor(i * 0.5)].children[i % 2].children;
        // 遍历数字组的子元素  
        Array.from(digit).forEach((e, i2) => e.classList[i2 === n ? 'add' : 'remove']('bright'));
    });
}

创建[themes]/source/css/custom/digit-clock.css文件，在其中添加如下内容：

#digit-clock {
    display: flex;
    justify-content: center;
    align-items: center;
}
#clock {
    font-size: 10px;
    position: relative;
}
.digit-group {
    display: inline-block;
}
.digit-group:not(:last-child):after {
    color: inherit;
    content: ":";
    font-size: 50px;
}
.digit {
    display: inline-block;
    width: 33px;
}
.digit .digit-number {
    color: inherit;
    transform: rotate(-90deg);
    transition: font-size 200ms,transform 350ms,color 150ms;
}
.digit .digit-number.bright {
    color: inherit;
    font-size: 25px;
    transform: rotate(0deg);
}

创建[blog]/source/_data/widget.yml文件，添加如下内容：

top:
  - class_name: card-clock
    id_name:
    name:
    icon: 
    order:
    html: <div id="digit-clock"></div><script defer async data-pjax src="/js/custom/digit-clock.js"></script>

假如你使用gulp压缩资源，可能会导致无法运行，修改gulpfile.js(我这里是使用的空梦的gulp):

// 压缩js
// 参数 doc：https://github.com/terser-js/terser#minify-options
gulp.task('minify-js', () =>
    gulp.src(['./public/**/*.js','!./public/**/digit-clock.js'])
        .pipe(terser({
            compress: {
                /** @see https://blog.csdn.net/weixin_39842528/article/details/81390588 */
                sequences: 50,
                unsafe: true,
                unsafe_math: true,
                pure_getters: true,
                ecma: true
            }
        }))
        .pipe(gulp.dest('./public'))
)