!!!是typecho的语法不能丢掉
!!!
<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="//b23.tv/'+i.bvid+'"><div class="bili_col">'
+'<img class="bili_head" referrerPolicy="no-referrer" 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" 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'));
}
});
//更新json
// $.ajax({
// url: url_base + '/bili.php',
// data: {
// "type": 'myFollow',
// "last_bvid": last_bvid
// },
// async: false,
// dataType: "json",
// }).success(function(ret_obj){
// if(ret_obj.ifRefresh){
// build_html(ret_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>
!!!