B站排行榜 表格字段初步处理完毕

html/bilibili_rank.html

@@ -5,6 +5,8 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- 不携带 referer -->
+    <meta name="referrer" content="never">
     <title>B站排行</title>
     <link rel="stylesheet" href="./assets/css/main.css">
     <style>
@@ -21,8 +23,8 @@
         td {
             font-size: 12px;
 
-            max-width: 160px;
-            word-wrap:break-word;
+            max-width: 200px;
+            word-wrap: break-word;
         }
     </style>
 </head>
@@ -271,32 +273,28 @@
                 <tr class="thead" style="top: 0; background-color: white; position: sticky;">
 
                     <td>编号</td>
-                    <td>aid</td>
+                    <td>标题</td>
+                    <td>时长</td>
+                    <td>封面</td>
+                    <td>第一帧</td>
+                    <td>视频ID</td>
+                    <td>分类</td>
+                    <td>发布时间</td>
+                    <td>简介</td>
+                    <td>作者(mid)</td>
+                    <td>统计</td>
+                    <td>视频宽高</td>
+                    <td>定位</td>
+
                     <td>videos</td>
                     <td>tid</td>
-                    <td>tname</td>
                     <td>copyright</td>
-                    <td>pic</td>
-                    <td>title</td>
-                    <td>pubdate</td>
-                    <td>ctime</td>
-                    <td>desc</td>
                     <td>state</td>
-                    <td>duration</td>
-                    <td>mission_id</td>
                     <td>rights</td>
-                    <td>owner</td>
-                    <td>stat</td>
                     <td>dynamic</td>
-                    <td>cid</td>
-                    <td>dimension</td>
-                    <td>short_link</td>
-                    <td>short_link_v2</td>
-                    <td>first_frame</td>
-                    <td>pub_location</td>
-                    <td>bvid</td>
                     <td>score</td>
 
+                    <td>mission_id</td>
                     <td>season_id</td>
                     <td>up_from_v2</td>
                     <td>others</td>
@@ -305,67 +303,155 @@
             str.push(`<tbody>`);
             for (var i = 0; i < hotBandList.length; i++) {
                 const hotBand = hotBandList[i];
-                let hotDelta = hotBand.num - hotBand.raw_hot;
+                let link = hotBand.short_link == hotBand.short_link_v2
+                    ? hotBand.short_link
+                    : `${hotBand.short_link}<br/>${hotBand.short_link_v2}`;
+
+                /**
+                 * 视频总秒数转化为友好显示时间
+                 */
+                // refer: https://blog.csdn.net/weixin_43838488/article/details/122337474
+                function formatZero(num, len) {
+                    if (String(num).length > len) {
+                        return num;
+                    }
+                    return (Array(len).join(0) + num).slice(-len)
+                }
+
+                let duration = hotBand.duration - 1; // 根据观测，基本上所有视频都是少1s(有些少了2s或者其他)，所以这里减1
+                let durationArr = [0, 0, 0];
+                durationArr[0] = Math.floor(duration / (60 * 60));
+                durationArr[1] = Math.floor((duration - durationArr[0] * 60 * 60) / 60);
+                durationArr[2] = Math.floor(duration - durationArr[0] * 60 * 60 - durationArr[1] * 60);
+                let durationStr = "";
+                if (durationArr[0] === 0) {
+                    // 小时为0
+                    durationStr = `${formatZero(durationArr[1], 2)}:${formatZero(durationArr[2], 2)}`;
+                } else {
+                    // 小时不为0
+                    durationStr = `${formatZero(durationArr[0], 2)}:${formatZero(durationArr[1], 2)}:${formatZero(durationArr[2], 2)}`;
+                }
+
+                //功能：求最大公约数
+                //参数： x 、y   number
+                //返回值： number
+                function gcd(x, y) {
+                    if (isNaN(x) || isNaN(y)) return null;
+
+                    if (x % y === 0) {
+                        return y;
+                    }
+                    return gcd(y, x % y)
+                    //三目运算符写法：
+                    //return x % y === 0 ? y : gcd(y , x % y) ;
+                }
+                let dimension_gcd = gcd(hotBand.dimension.width, hotBand.dimension.height);
+
                 str.push(`<tr>
                     <!-- 编号 -->
                     <td>${i + 1}</td>
+
+                    <!-- 标题 -->
+                    <td>
+                        <a href="${link}" target="_blank">${hotBand.title}</a>
+                    </td>
+
+                    <!-- 时长 -->
+                    <td>${durationStr}<br>(${hotBand.duration}s)</td>
+
+                    <!-- 封面 -->
+                    <td>
+                        <img src="${hotBand.pic}" style="width: 120px;"/>
+                    </td>
+
+                    <!-- 第一帧 -->
+                    <td>
+                        <img src="${hotBand.first_frame}" style="width: 120px;"/>
+                    </td>
+
                     <!-- aid -->
-                    <td>${hotBand.aid}</td>
+                    <td style="text-align: left;">
+                        <nobr>aid: ${hotBand.aid}</nobr>
+                        <nobr>bvid: ${hotBand.bvid}</nobr>
+                        <nobr>cid: ${hotBand.cid}</nobr>
+                    </td>
+
+                    <!-- 分类 -->
+                    <td>${hotBand.tname}</td>
+
+                    <!-- 发布时间 -->
+                    <td style="font-size: 10px;">
+                        <nobr>pubdate: ${new Date(hotBand.pubdate * 1000).toLocaleString()}</nobr>
+                        <nobr>ctime: ${new Date(hotBand.ctime * 1000).toLocaleString()}</nobr>
+                    </td>
+
+                    <!-- 简介 -->
+                    <td>${hotBand.desc}</td>
+
+                    <!-- 作者 -->
+                    <td>
+                        <img src="${hotBand.owner.face}" style="width: 30px;"/><br>
+                        ${hotBand.owner.name}<br>
+                        (${hotBand.owner.mid})
+                        <!-- ${JSON.stringify(hotBand.owner)} -->
+                    </td>
+
+                    <!-- 统计 -->
+                    <td style="text-align: left;">
+                        <nobr>播放: ${hotBand.stat.view}</nobr>
+                        <nobr>弹幕: ${hotBand.stat.danmaku}</nobr>
+                        <nobr>评论: ${hotBand.stat.reply}</nobr>
+                        <nobr>喜欢: ${hotBand.stat.favorite}</nobr>
+                        <nobr>投币: ${hotBand.stat.coin}</nobr>
+                        <nobr>分享: ${hotBand.stat.share}</nobr>
+                        <!--<nobr>当前排名: ${hotBand.stat.now_rank}</nobr>-->
+                        <nobr>历史<!--最高-->排名: ${hotBand.stat.his_rank}</nobr>
+                        <nobr>喜欢数: ${hotBand.stat.like}</nobr>
+                        <nobr>不喜欢数: ${hotBand.stat.dislike}</nobr>
+                        <!-- ${JSON.stringify(hotBand.stat)} -->
+                    </td>
+
+                    <!-- 视频宽高 -->
+                    <td>
+                        ${hotBand.dimension.width}:${hotBand.dimension.height}<br>
+                        (${hotBand.dimension.width / dimension_gcd}:${hotBand.dimension.height / dimension_gcd})
+                        <!-- ${hotBand.dimension.rotate} -->
+                        <!-- ${JSON.stringify(hotBand.dimension)} -->
+                    </td>
+
+                    <!-- 定位 -->
+                    <td>
+                        <nobr>${hotBand.pub_location}</nobr>
+                    </td>
+
+
                     <!-- videos -->
                     <td>${hotBand.videos}</td>
                     <!-- tid -->
                     <td>${hotBand.tid}</td>
-                    <!-- tname -->
-                    <td>${hotBand.tname}</td>
                     <!-- copyright -->
                     <td>${hotBand.copyright}</td>
-                    <!-- pic -->
-                    <td>${hotBand.pic}</td>
-                    <!-- title -->
-                    <td>${hotBand.title}</td>
-                    <!-- pubdate -->
-                    <td>${hotBand.pubdate}</td>
-                    <!-- ctime -->
-                    <td>${hotBand.ctime}</td>
-                    <!-- desc -->
-                    <td>${hotBand.desc}</td>
                     <!-- state -->
                     <td>${hotBand.state}</td>
-                    <!-- duration -->
-                    <td>${hotBand.duration}</td>
-                    <!-- mission_id -->
-                    <td>${hotBand.mission_id}</td>
                     <!-- rights -->
                     <td>${JSON.stringify(hotBand.rights)}</td>
-                    <!-- owner -->
-                    <td>${JSON.stringify(hotBand.owner)}</td>
-                    <!-- stat -->
-                    <td>${JSON.stringify(hotBand.stat)}</td>
                     <!-- dynamic -->
                     <td>${hotBand.dynamic}</td>
-                    <!-- cid -->
-                    <td>${hotBand.cid}</td>
-                    <!-- dimension -->
-                    <td>${JSON.stringify(hotBand.dimension)}</td>
-                    <!-- short_link -->
-                    <td>${hotBand.short_link}</td>
-                    <!-- short_link_v2 -->
-                    <td>${hotBand.short_link_v2}</td>
-                    <!-- first_frame -->
-                    <td>${hotBand.first_frame}</td>
-                    <!-- pub_location -->
-                    <td>${hotBand.pub_location}</td>
-                    <!-- bvid -->
-                    <td>${hotBand.bvid}</td>
                     <!-- score -->
                     <td>${hotBand.score}</td>
 
+                    <!-- mission_id -->
+                    <td>${hotBand.mission_id ? hotBand.mission_id : ''}</td>
                     <!-- season_id -->
-                    <td>${hotBand.season_id}</td>
+                    <td>${hotBand.season_id ? hotBand.season_id : ''}</td>
                     <!-- up_from_v2 -->
-                    <td>${hotBand.up_from_v2}</td>
+                    <td>${hotBand.up_from_v2 ? hotBand.up_from_v2 : ''}</td>
                     <!-- others -->
-                    <td><div style="max-height: 200px; overflow: scroll;"><span>${JSON.stringify(hotBand.others)}</span></div></td>
+                    <td>
+                        ${hotBand.others
+                        ? `<div style="max-height: 200px; overflow: scroll;"><span>${JSON.stringify(hotBand.others)}</span></div>`
+                        : ''}
+                    </td>
                 </tr >`);
             }
             str.push(`</tbody>`);