我的bilibili

如果觉得我的文章对你有用，请随意赞赏

6 条评论

foglede
November 29th, 2020 at 06:01 am

嗷哟，居然用API写作的。
1. moozik
  November 29th, 2020 at 04:13 pm
  
  @foglede
  
  那不然呢。。|´・ω・)ノ
格子老师
March 12th, 2020 at 04:15 pm

做的漂亮！！只可惜我平时关注的少！！
moozik
November 19th, 2019 at 03:45 pm

真好，做了这个可以随时看到我特别关注的up了，有人想用吗，有人想用我就做个插件
1. 刘小白
  March 12th, 2020 at 10:39 pm
  
  @moozik
  
  想要
  1. moozik
    November 29th, 2020 at 05:42 pm
    
    @刘小白
    
    想了想没有很好的办法，只能用定时任务

此处评论已关闭

我的bilibili

moozik • 2019 年 09 月 10 日

<style>
#biliBtn button{
    margin: 10px 0px 10px 20px;
}
#post-content {
    background-color: #f1f3f4;
    padding: 0px;
}
.post-img-figcaption{
    margin-top:0px;
}
#bili {
    overflow: hidden;
}
#bili .bili_div {
    position: relative;
    width: 280px;
    height: 227px;
    float: left;
    margin: 15px 0px 30px 80px;
    margin-left:25px;
}
#bili .bili_col {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 25px 10px 10px 10px;
    background-color: #272727;
    box-shadow: -10px 12px 5px #00000050
}
#bili .bili_head {
    margin: 0px;
    background-size: 100% 100%;
    position: absolute;
    top: 0px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transition: all .5s
}
#bili .bili_head:hover {
    transform: rotate(360deg);
}
#bili .bili_top {
    font-size: 12px;
    padding-left: 50px;
    border-bottom: 1px solid #737373;
}
#bili .bili_bot {
    width: 280px;
    height: 177px;
    border-top: 1px solid #bfbfbf;
    position: relative;
}
#bili .bili_name {
    line-height: 24px;
    height: 20px;
    padding: 0px 0px 0px 0px;
    color: bisque;
}
#bili .bili_time {
    line-height: 20px;
    float: right;
    padding-right: 10px;
}
#bili .bili_title {
    height: 30px;
    overflow: hidden;
    color: #fff;
    line-height: 16px;
}
#bili .bili_title a {
    text-decoration: none;
    color: #f35;
}
#bili .bili_img {
    margin: 0px;
}
#bili .bili_h_desc {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 177px;
    padding: 3px;
    color: white;
    background-color: #000;
    opacity: 0;
    line-height: 19px;
    transition: all .2s;
    white-space: pre-wrap;
}
#bili .bili_bot:hover .bili_h_desc {
    opacity: 0.8;
    top: 0px;
}
</style>
<script>
function imgUrl(imgName,tail){
    tail = tail||'';
    if(typeof(imgName) == 'undefined'){
        return '#';
    }
    return imgName + tail;
}
function build_html(obj,e){
    $('#bili').html('');
    e.attr('title','更新时间:' + obj.last_time_str);
    $.each(obj.list,function(k,i){
        var creat_time = new Date(i.created * 1000);//toLocaleString()
        creat_time = creat_time.toLocaleDateString().replace(/\//g, "-") + " " + creat_time.toTimeString().substr(0, 8)
        $('#bili').append(
        `<div class="bili_div"><a target="_blank" href="//www.bilibili.com/${i.bvid}"><div class="bili_col">
            <img class="bili_head" referrerPolicy="no-referrer" style="margin:0px;" src="${imgUrl(i.face,'@64w_64h.webp')}">
            <div class="bili_top">
                <div class="bili_name">${i.author}<span class="bili_time">${creat_time}</span></div>
                <div class="bili_title">${i.title}</div>
            </div>
            <div class="bili_bot">
                <img class="bili_img" referrerPolicy="no-referrer" style="margin:0px;" src="${imgUrl(i.pic, '@280w_175h_100Q_1c.webp')}"/>
                <div class="bili_h_desc">${i.desc}</div>
            </div>
        </div></a></div>`);
    });
}
$(document).ready(function(){
    var url_base = '/code/bili';
    $('#myFollow').click(function(){
        $('#biliBtn button').removeClass('active');
        $(this).addClass('active');
        var last_bvid = 0;
        //请求json
        $.ajax({
            url: url_base + '/bili_myFollow.json',
            headers: {
                "Cache-Control": "max-age=120",
            },
            async: false,
            dataType: "json",
        }).success(function(bili_obj){
            if(bili_obj.list.length > 0){
                last_bvid = bili_obj.list[0].bvid;
                build_html(bili_obj,$('#myFollow'));
            }
        });
    });

$('#hotRanking').click(function(){
        $('#biliBtn button').removeClass('active');
        $(this).addClass('active');
        $.ajax({
            url: url_base + '/bili.php',
            data: {
                "type": 'hotRanking'
            },
            headers: {
                "Cache-Control": "max-age=31536000",
            },
            async: false,
            dataType: "json",
        }).success(function(ret_obj){
            build_html(ret_obj,$('#hotRanking'));
        });
    });
    $('#hotRanking').click();

$('#nowRanking').click(function(){
        $('#biliBtn button').removeClass('active');
        $(this).addClass('active');
        $.ajax({
            url: url_base + '/bili.php',
            data: {
                "type": 'nowRanking'
            },
            headers: {
                "Cache-Control": "max-age=31536000",
            },
            async: false,
            dataType: "json",
        }).success(function(ret_obj){
            build_html(ret_obj,$('#nowRanking'));
        });
    });

$('#weekRanking').click(function(){
        $('#biliBtn button').removeClass('active');
        $(this).addClass('active');
        $.ajax({
            url: url_base + '/bili.php',
            data: {
                "type": 'weekRanking'
            },
            headers: {
                "Cache-Control": "max-age=31536000",
            },
            async: false,
            dataType: "json",
        }).success(function(ret_obj){
            build_html(ret_obj,$('#weekRanking'));
        });
    });
});
</script>

<div id="biliBtn">
<button type="button" class="btn btn-warning" id="hotRanking">综合热门</button>
<button type="button" class="btn btn-success" id="nowRanking">排行榜</button>
<button type="button" class="btn btn-primary" id="myFollow">我的关注</button>
<button type="button" class="btn btn-info" id="weekRanking">每周必看</button>
</div>
<div id="bili"></div>