网站添加的一些功能

尚待实现的功能：

设计一个昼夜切换或者四季切换的首页轮播图

替换空白的背景，改成特效或图片

1

aplayer 音乐播放器，MetingJS封装APlayer，实现播放网易云歌单。

全站左下悬浮的音乐播放器，也可以播放网易云没有的音乐，制作自己的歌单，播放url指定的音频。添加艺术家，封面，歌词等。

调用：

<meting-js 
    server="netease" 
    type="playlist" 
    id="7581475793"
    fixed="true" 
    mini="true"
    order="random"
    loop="all"
    preload="auto"
    list-folded="false"
    lrc-type="0">
</meting-js>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
<script src="https://src.wangriyu.wang/lib/Aplayer/APlayer.min.js"></script>

2

Prim.js 特殊样式的代码语法高亮代码块，语言不同，高亮格式不同。
示例：

#include <iostream>
using namespace std;

int main()
{
    std::cout << "Hello, World!" <<std::endl;
    return 0;
}

public class HelloWorld {
    public static void main(String[] args) {
       System.out.println("Hello World");
    }
}

<?php  
    echo "Hello,World!";             
    echo phpinfo();                 
?>  

调用：

<pre><code class="language-c line-numbers">
#include <stdio.h>
int main()                 
{  
    printf("Hello,World!"); 
    return 1;                
} 
</code></pre>

<link href="https://blog.ingke.net/myscript/prism.css" rel="stylesheet"/>
<script src="https://blog.ingke.net/myscript/prism.js"></script>

3

修改了footer页面样式，添加运行时长

沿用主题的灰色的页脚文字，使用白色字体高亮主题，原作者，修改者（我）。

添加每日诗词接口在版权声明下添加一句古诗词，API提供的诗词句根据地理位置，当天时间，季节提供。

找了个网站运行时长的代码，修改了下，能够处理闰年。

function runTime() {
    var d = new Date(), str = '';
    BirthDay = new Date("2021-6-12");
    today = new Date();
    timeold = (today.getTime() - BirthDay.getTime());
    sectimeold = timeold / 1000
    secondsold = Math.floor(sectimeold);
    msPerDay = 24 * 60 * 60 * 1000
    msPerYear = 365 * 24 * 60 * 60 * 1000
    e_daysold = timeold / msPerDay
    e_yearsold = timeold / msPerYear
    daysold = Math.floor(e_daysold);
    yearsold = Math.floor(e_yearsold);
    
    //计算闰年增加天数，仅适用于2000-2100年
    var leap_year_day = 0;
    if ((BirthDay.getFullYear() % 4 == 0 && BirthDay.getMonth() < 3 )|| (today.getFullYear() % 4 == 0 && today.getMonth() >= 3))
        leap_year_day = 1;
    leap_year_day += parseInt((today.getFullYear() - BirthDay.getFullYear()) / 4);
    
    str = yearsold + "年";
    str += daysold - yearsold * 365 - leap_year_day + "天";
    str += d.getHours() + '时';
    str += d.getMinutes() + '分';
    str += d.getSeconds() + '秒';
    return str;
}
setInterval(function () {
    $('#run_time').html(runTime())
}, 1000);

4

首页标题添加每日一言，每次刷新会在接口的库或者自己的中二语句库里抽一句显示

打字标题，typed.js实现

<span id="subtitle"></span> 

<script>
var typed = new Typed("#subtitle", {
    strings: [ 
            '清科谷体的博客',
            'ingker的web试验场',
    ],
    startDelay: 800,
    typeSpeed: 100,
    loop: false,
    backSpeed: 100,
    showCursor: true
});
</script>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>

hitokoto一言，调用一言接口

<span id="hitokoto"></span>

<script>
    fetch('https://v1.hitokoto.cn/?c=a')
        .then(response => response.json())
        .then(data => {
        const hitokoto = document.querySelector('#hitokoto')
        const hitokoto_from = document.querySelector('#hitokoto_from')
        if (data.from_who != null)
            hitokoto.innerText = data.hitokoto + '——' + data.from_who + '《' + data.from + '》'
        else
            hitokoto.innerText = data.hitokoto + '——' + '《' + data.from + '》'
        })
</script>

5

鼠标点击特效

<!-- 鼠标点击撒花效果 -->
<script src="https://blog.ingke.net/myscript/cursor-effects.js" defer></script>
<!-- 鼠标点击爱心特效 -->
<script type="text/javascript">
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("三观独立","敢于质疑","理念自由","崇尚智慧");
        var $i = $("<span></span>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "red"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});
</script>