实现这个功能,其实很简单,就是做一段定时存储处理嘛,然后在用户打开首页的时候,在首页某个地方展示就行了,直接copy首页的css样式就像,取决你放哪里。
那么理论存在,思路也有了,开始实现。
功能实现
那既然是观看历史,肯定是在首页直接展示或者用户登录页,我这边取首页展示了,具体效果可以查看我的WarHut影视
首先肯定是分析下自己首页的整体样式,看看该怎么样无缝插入最好,这边我直接取了 热门推荐
这个样式,好用且不复杂,也不影响原有布局。
<!-- 热门推荐 -->
<my-list class="flex flex-col p-4 pt-7 md:mb-[1vw] md:mt-[2.1875vw] md:flex md:p-0 mylist">
<import file="../libs/web/notice/index.html"/>
<!-- 上方通用广告dom -->
<div class="box-width" style="margin-bottom: 10px;">
<import file="../libs/web/ads/index.html" data="topBanner" />
</div>
<section-header class="flex items-center gap-[0.625vw]" style="margin-top: 20px;">
<header-title class="text-lg font-bold md:text-[1.25vw]" data-svelte-h="svelte-1ng29d9">热门推荐</header-title>
</section-header>
<my-list-animes class="relative mt-4 grid grid-cols-3 gap-3 md:mt-[1vw] md:grid-cols-5 md:gap-[1.25vw]" id="hotRecommendations">
<getVideosList name="$List" page="1" limit="$.G.Nums.VodHotNum" hots="1" random="1">
<foreach name="$items" index="$index" data=".List">
<import file="/public/list.html" data="$" />
</foreach>
</getVideosList>
</my-list-animes>
<div class="section-box boxindexbutton" style="margin-top: 10px;">
<import file="../libs/web/ads/index.html" data="bottomBanner" />
</div>
<!-- 历史记录部分 -->
<section-header class="flex items-center gap-[0.625vw]" style="margin-top: 20px;">
<header-title class="text-lg font-bold md:text-[1.25vw]">历史记录</header-title>
</section-header>
<div id="historyList" class="relative mt-4 grid grid-cols-3 gap-3 md:mt-[1vw] md:grid-cols-5 md:gap-[1.25vw]"></div>
</my-list>
很清楚的看到,就是在热门历史下面加了一段差不多的css,不影响原基础的样式下,这样就实现了首页展示。
什么?你说忘记了js部分?噢,对噢,确实,还需要js进行存储数据并且展出数据
那么接下来就是js部分了,其实更简单了~找到你的通用js地方,最好是播放页面引入的,这样就不会在其它地方加载,浪费事件。
那么js部分就非常简单了,就是一些元素dom操作以及本地会话存储,你看不懂?丢chatgpt啊!推荐国产的deepseek
<script>
function populateHistory() {
const hlHistory = document.querySelector('#historyList');
const visitData = localStorage.getItem('visit');
if (visitData) {
let arr = JSON.parse(visitData);
// 使用 Map 来去除重复的历史记录,键为 item.url
const uniqueItemsMap = new Map();
arr.forEach(item => {
if (!uniqueItemsMap.has(item.url)) {
uniqueItemsMap.set(item.url, item);
}
});
// 从 Map 中获取去重后的数组
arr = Array.from(uniqueItemsMap.values());
let strDom = '';
arr.forEach(item => {
strDom += `
<div style="position: relative; overflow: hidden;" class="listwidth cmslistwidth">
<a href="${item.url}" style="overflow: hidden; position: relative">
<div class="" style="overflow: hidden; width: 100%; height: 100%;">
<div class="" style="position: relative; width: 100%; height: 100%;">
<img class="cmslazyload" style="width: 100%; height: 100%; border-radius: 10px; object-fit: cover;" src="${item.imgUrl}" data-original="${item.imgUrl}">
</div>
</div>
<div style="position: absolute;" class="cms-seo026-vod-info">
<div class="cms-seo025-padding">
<div style=" color: #fff;" class="cms-seo025-name">${item.name}</div>
<div class="cms-seo025-margin" style="display: flex; align-items: center;">
<span>${item.tag}</span>
</div>
</div>
</div>
</a>
</div>
`;
});
hlHistory.innerHTML = strDom;
} else {
hlHistory.innerHTML = '<div class="histpre"><span>暂无播放记录</span></div>';
}
}
// 短暂延迟后填充历史记录,以确保加载元素
setTimeout(populateHistory, 1000);
</script>