JavaScript 实现年视图的时间进度条

之前在 solstice23 的主页工具栏看到了这个年度进度条的工具，于是请教了一下JS的源码实现。该代码在实现以秒计算本年进度的同时，添加了鼠标放置在百分比上显示更详细实时进度比例的功能。

可以通过 WordPress 的自定义 HTML 功能添加到网页工具栏，实现效果可参考本站功能栏。

代码部分如下：

<div class="textwidget custom-html-widget">
<div id="custom_html-2" class="widget_text widget widget_custom_html card bg-white border-0">
<h5 class="font-weight-bold text-black">Year Progress</h5>
<div class="textwidget custom-html-widget">
<div class="progress-wrapper" style="padding:0;">
    <div class="progress-info">
        <div class="progress-label">
            <span id="yearprogress_yearname">2020</span>
        </div>
        <div id="yearprogress_text_container" class="progress-percentage">
            <span id="yearprogress_progresstext">54.54%</span>
            <span id="yearprogress_progresstext_full">54.5438492%</span>
        </div>
    </div>
    <div class="progress">
        <div id="yearprogress_progressbar" class="progress-bar" style="width: 54.5438%;background-color:#009688"></div>
        <!-- 此处的 background-color 可以通过 16 进制颜色代码自定义进度条颜色-->
    </div>
</div>
<script no-pjax="">
function yearprogress_refresh(){
    let year = new Date().getFullYear();
    $("#yearprogress_yearname").text(year);
    let from = new Date(year, 0, 1, 0, 0, 0);
    let to = new Date(year, 11, 31, 23, 59, 59);
    let now = new Date();
    let progress = ((now - from) / (to - from + 1) * 100).toFixed(7);
    let progressshort = ((now - from) / (to - from + 1) * 100).toFixed(2);
$("#yearprogress_progresstext").text(progressshort + "%");
$("#yearprogress_progresstext_full").text(progress + "%");
    $("#yearprogress_progressbar").css("width" , progress + "%");
}
    yearprogress_refresh();
    if (typeof(yearProgressIntervalHasSet) == "undefined"){
    var yearProgressIntervalHasSet = true;
    setInterval(function(){yearprogress_refresh();},500);
}
</script>
<style>
#yearprogress_text_container {
    width: 100%;
    height: 22px;
    overflow: hidden;
    user-select: none;
}
#yearprogress_text_container > span {
    transition:all .3s ease;
    display: block;
}
#yearprogress_text_container:hover > span {
    transform: translateY(-20px);
}
</style>
</div></div>
</div>