功能里的 Year Progress

<div id="custom_html-2" class="widget_text widget widget_custom_html card bg-white border-0"><h6 class="font-weight-bold text-black">Year Progress</h6><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">20--</span>
        </div>
        <div id="yearprogress_text_container" class="progress-percentage">
            <span id="yearprogress_progresstext">--%</span>
            <span id="yearprogress_progresstext_full">--%</span>
        </div>
    </div>
    <div class="progress">
        <div id="yearprogress_progressbar" class="progress-bar bg-primary" style="width: 0%;"></div>
    </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;
}
#yearprogress_text_container:hover > span {
    transform: translateY(-25px);
}
</style>

下拉页面背景模糊

页头

<style>
    #content::before {
        transition: filter .3s ease, transform .3s ease !important;
        filter: blur(0px);
        transform: scale(1.02);
    }
    #content.scrolled::before {
        filter: blur(8px);
        transform: scale(1.02);
    }
</style>

页尾

<script>
    const banner = document.querySelector('#banner');
    const content = document.querySelector('#content');
      
    window.addEventListener('scroll', () => {
        if(window.scrollY > banner.offsetHeight / 3) {
            content.classList.add('scrolled');
        } else {
            content.classList.remove('scrolled');
        }
    });
</script>

页脚博客运行日期统计

<div>已运行 <span id="blog_running_days" class="odometer"></span> days , <span id="blog_running_hours" class="odometer"></span> h , <span id="blog_running_mins" class="odometer"></span> m , <span id="blog_running_secs" class="odometer"></span> s</div>
<script no-pjax>
var blog_running_days=document.getElementById("blog_running_days");
var blog_running_hours=document.getElementById("blog_running_hours");
var blog_running_mins=document.getElementById("blog_running_mins");
var blog_running_secs=document.getElementById("blog_running_secs");
function refresh_blog_running_time(){
    var time = new Date() - new Date(2023,7,14,00,00,00);
    var d=parseInt(time/24/60/60/1000);
    var h=parseInt(time%(24*60*60*1000)/60/60/1000);
    var m=parseInt(time%(60*60*1000)/60/1000);
    var s=parseInt(time%(60*1000)/1000);
    blog_running_days.innerHTML=d;
    blog_running_hours.innerHTML=h;
    blog_running_mins.innerHTML=m;
    blog_running_secs.innerHTML=s;
}
refresh_blog_running_time();
if (typeof(bottomTimeIntervalHasSet) == "undefined"){
    var bottomTimeIntervalHasSet = true;
    setInterval(function(){refresh_blog_running_time();},500);
}
</script>