<!DOCTYPE html> <html lang="zh-CN"> <head>

   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>鸣潮视频数据展示</title>
   <style>
       body {
           font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
           margin: 0;
           padding: 20px;
           background-color: #f5f5f5;
           color: #333;
       }
       .container {
           max-width: 1200px;
           margin: 0 auto;
           background-color: white;
           border-radius: 8px;
           box-shadow: 0 2px 10px rgba(0,0,0,0.1);
           padding: 20px;
       }
       h1 {
           color: #fb7299;
           text-align: center;
           margin-bottom: 30px;
       }
       .filter-controls {
           display: flex;
           justify-content: space-between;
           margin-bottom: 20px;
           padding: 10px;
           background-color: #f9f9f9;
           border-radius: 4px;
       }
       .video-table {
           width: 100%;
           border-collapse: collapse;
       }
       .video-table th, .video-table td {
           padding: 12px 15px;
           text-align: left;
           border-bottom: 1px solid #eee;
       }
       .video-table th {
           background-color: #f9f9f9;
           font-weight: 600;
           color: #666;
       }
       .video-table tr:hover {
           background-color: #f5f5f5;
       }
       .video-link {
           color: #fb7299;
           text-decoration: none;
       }
       .video-link:hover {
           text-decoration: underline;
       }
       .play-count {
           color: #666;
           font-family: monospace;
       }
       .pagination {
           display: flex;
           justify-content: center;
           margin-top: 20px;
       }
       .pagination button {
           padding: 8px 16px;
           margin: 0 5px;
           border: 1px solid #ddd;
           background-color: white;
           border-radius: 4px;
           cursor: pointer;
       }
       .pagination button:hover {
           background-color: #f5f5f5;
       }
       .pagination button.active {
           background-color: #fb7299;
           color: white;
           border-color: #fb7299;
       }
   </style>

</head> <body>

B站"鸣潮"标签视频数据

               <label for="date-range">发布时间：</label>
               <select id="date-range">
                   <option value="all">全部</option>
                   <option value="2025-07">2025年7月</option>
                   <option value="2025-06">2025年6月</option>
                   <option value="2025-05">2025年5月</option>
               </select>

               <label for="min-views">最低播放量：</label>
               <select id="min-views">
                   <option value="0">全部</option>
                   <option value="1000000">100万+</option>
                   <option value="5000000">500万+</option>
                   <option value="10000000">1000万+</option>
               </select>

序号	视频标题	播放量	发布时间	链接

           <button id="prev-page">上一页</button>
           1/1
           <button id="next-page">下一页</button>

   <script>
       // 模拟数据 - 实际应用中应替换为从B站API获取的真实数据
       const mockVideos = [
           {
               title: "鸣潮2.3版本焰行夏曲庆团圆实机演示",
               url: "https://www.bilibili.com/video/BV1dsZPYsEbi",
               play_count: 1250000,
               pubdate: "2025-07-15"
           },
           {
               title: "鸣潮一周年庆典活动全解析",
               url: "https://www.bilibili.com/video/BV1xK4y1C7y1",
               play_count: 980000,
               pubdate: "2025-07-10"
           },
           {
               title: "鸣潮新角色炽霞实战测评",
               url: "https://www.bilibili.com/video/BV1cP4y1a7SE",
               play_count: 3200000,
               pubdate: "2025-07-05"
           },
           {
               title: "鸣潮2.3版本bilibili创作激励计划",
               url: "https://www.bilibili.com/opus/1061148982053437447",
               play_count: 870000,
               pubdate: "2025-07-01"
           },
           {
               title: "鸣潮云陵谷纵跑技巧教学",
               url: "https://www.bilibili.com/video/BV1Kb411W75N",
               play_count: 450000,
               pubdate: "2025-06-28"
           }
       ];

       // 渲染视频列表
       function renderVideos(videos) {
           const videoList = document.getElementById('video-list');
           videoList.innerHTML = ;
           
           videos.forEach((video, index) => {
               const row = document.createElement('tr');
               row.innerHTML = `

${index + 1} ${video.title} ${(video.play_count / 10000).toFixed(1)}万 ${video.pubdate} 查看

               `;
               videoList.appendChild(row);
           });
       }

       // 初始化页面
       document.addEventListener('DOMContentLoaded', () => {
           // 初始渲染
           renderVideos(mockVideos.filter(video => 
               video.pubdate.startsWith('2025-07') && 
               video.play_count >= 1000000
           ));
           
           // 筛选控制
           document.getElementById('date-range').addEventListener('change', applyFilters);
           document.getElementById('min-views').addEventListener('change', applyFilters);
           
           // 分页控制
           document.getElementById('prev-page').addEventListener('click', () => {
               alert('上一页功能需连接实际API实现');
           });
           
           document.getElementById('next-page').addEventListener('click', () => {
               alert('下一页功能需连接实际API实现');
           });
       });
       
       // 应用筛选条件
       function applyFilters() {
           const dateRange = document.getElementById('date-range').value;
           const minViews = parseInt(document.getElementById('min-views').value);
           
           let filteredVideos = [...mockVideos];
           
           // 按日期筛选
           if (dateRange !== 'all') {
               const [year, month] = dateRange.split('-');
               filteredVideos = filteredVideos.filter(video => {
                   const [vYear, vMonth] = video.pubdate.split('-');
                   return vYear === year && vMonth === month;
               });
           }
           
           // 按播放量筛选
           filteredVideos = filteredVideos.filter(video => video.play_count >= minViews);
           
           renderVideos(filteredVideos);
       }
   </script>

</body> </html>

Widget:23

WIKI功能

B站"鸣潮"标签视频数据