小生博客 - 学习 https://blog.pet111.cn/category/xuexi/ zh-CN Sat, 24 Jan 2026 19:13:00 +0800 Sat, 24 Jan 2026 19:13:00 +0800 新年专属网页悬浮音乐播放器代码 https://blog.pet111.cn/archives/511/ https://blog.pet111.cn/archives/511/ Sat, 24 Jan 2026 19:13:00 +0800 MR.李先森 播放器

上些日子给网站做了有关于新年红的配色，今天就总觉得差点什么，索性写了一个播放器。过年了放上会更加有新年氛围，提前祝大家新年快乐！

功能说明
响应式布局：手机端底部居中（支持收缩 / 展开），电脑端左下角固定显示
核心功能：播放 / 暂停、下一曲切换、单曲结束自动切歌，随机切歌不重复
体验优化：刷新 / 页面跳转精准续播、无闪烁无冗余样式、手机端点击空白处收缩展开
样式特色：新年红金配色、悬浮阴影效果、按钮交互反馈，适配中文字体无乱码
兼容处理：突破浏览器自动播放限制，兼容微信 X5 内核，全局样式无冲突
使用说明

1. 代码部署
将以下完整代码直接粘贴到 Typecho 主题自定义 HTML/PHP 文件中（如页脚文件footer.php），建议放在标签前。

    <style>
    #musicPlayer {
        position: fixed;
        bottom: 10px;
        z-index: 999;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px 20px;
        background: rgba(216, 0, 15, 0.9);
        border-radius: 50px;
        box-shadow: 0 0 20px rgba(250, 108, 0, 0.8);
        -webkit-tap-highlight-color: transparent;
        box-sizing: border-box;
        border: 2px solid #dc8f03;
        left: 50%;
        transform: translateX(-50%);
        min-width: fit-content;
        transition: all 0.3s ease-in-out;
    }
    @media screen and (min-width: 768px) {
        #musicPlayer {
            left: 15px;
            transform: translateX(0);
        }
        #musicInfo {
            display: block !important;
        }
    }
    @media screen and (max-width: 767px) {
        #musicPlayer.shrink {
            padding: 8px;
        }
        #musicInfo {
            display: block;
            transition: all 0.3s ease-in-out;
        }
        #musicPlayer.shrink #musicInfo {
            display: none;
        }
    }
    .music-btn {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        border: none;
        outline: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: bold;
        color: #d8000f;
        background: #dc8f03;
        transition: all 0.3s ease;
        box-shadow: 0 0 10px rgba(250, 108, 0, 0.5);
    }
    .music-btn:hover {
        background: #fff;
        color: #d8000f;
        box-shadow: 0 0 15px rgba(250, 108, 0, 1);
    }
    .music-btn:active {
        transform: scale(0.95);
    }
    #musicInfo {
        color: #fff;
        font-size: 13px;
        font-family: "Microsoft YaHei", sans-serif;
        white-space: nowrap;
        line-height: 1.2;
    }
    #musicInfo span {
        color: #ffd700;
        font-weight: 500;
    }
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    </style>
    <div id="musicPlayer">
        <audio id="bgMusic" preload="auto" style="display: none;"></audio>
        <button id="playBtn" class="music-btn">播放</button>
        <button id="nextBtn" class="music-btn">下一曲</button>
        <div id="musicInfo">
            <span id="playStatus">暂停播放</span>：<span id="songName"></span> - <span id="singerName"></span>
        </div>
    </div>
    <script>
    window.addEventListener('load', function() {
        const audio = document.getElementById('bgMusic');
        const playBtn = document.getElementById('playBtn');
        const nextBtn = document.getElementById('nextBtn');
        const playStatusEl = document.getElementById('playStatus');
        const songNameEl = document.getElementById('songName');
        const singerNameEl = document.getElementById('singerName');
        const musicPlayer = document.getElementById('musicPlayer');
    
        const musicList = [
            { src: '/UGC/1.mp3', name: '《张灯结彩》', singer: '王二妮、阿宝' },
            { src: '/UGC/2.mp3', name: '《恭喜发财》', singer: '刘德华' },
            { src: '/UGC/3.mp3', name: '《新年大吉》', singer: '祁隆' }
        ];
    
        let lastIndex = -1;
        let isPlaying = false;
        const CACHE_KEY = 'music_play_state';
        let isInitiated = false;
        let isShrinked = false;
    
        function updateStatus() {
            const statusText = isPlaying ? '正在播放' : '暂停播放';
            playStatusEl.innerText = statusText;
            playBtn.innerText = isPlaying ? '暂停' : '播放';
        }
    
        function updateMusicInfo(index) {
            const song = musicList[index];
            songNameEl.innerText = song.name;
            singerNameEl.innerText = song.singer;
        }
    
        function getRandomIndex() {
            let randomIndex;
            do {
                randomIndex = Math.floor(Math.random() * musicList.length);
            } while (randomIndex === lastIndex && musicList.length > 1);
            lastIndex = randomIndex;
            return randomIndex;
        }
    
        function saveState() {
            const currentIndex = musicList.findIndex(item => item.src === audio.src);
            const state = {
                isPlaying,
                index: currentIndex > -1 ? currentIndex : 0,
                time: audio.currentTime,
                lastIndex
            };
            sessionStorage.setItem(CACHE_KEY, JSON.stringify(state));
        }
    
        function restoreState() {
            const cache = sessionStorage.getItem(CACHE_KEY);
            if (!cache) return false;
            try {
                const state = JSON.parse(cache);
                audio.src = musicList[state.index].src;
                audio.currentTime = state.time;
                lastIndex = state.lastIndex;
                isPlaying = state.isPlaying;
                updateMusicInfo(state.index);
                return true;
            } catch (e) {
                sessionStorage.removeItem(CACHE_KEY);
                return false;
            }
        }
    
        function toggleShrink() {
            if (window.innerWidth > 767) return;
            isShrinked = !isShrinked;
            musicPlayer.classList.toggle('shrink', isShrinked);
        }
    
        function playCore() {
            audio.muted = true;
            audio.play().then(() => {
                isPlaying = true;
                updateStatus();
                setTimeout(() => audio.muted = false, 100);
                isInitiated = true;
                saveState();
                if (window.innerWidth <= 767 && !isShrinked) {
                    isShrinked = true;
                    musicPlayer.classList.add('shrink');
                }
            }).catch(err => {
                isPlaying = false;
                updateStatus();
            });
        }
    
        function playMusic() {
            if (!audio.src) {
                const index = getRandomIndex();
                audio.src = musicList[index].src;
                updateMusicInfo(index);
            }
            playCore();
        }
    
        function pauseMusic() {
            audio.pause();
            isPlaying = false;
            updateStatus();
            saveState();
        }
    
        function togglePlay() {
            if (window.innerWidth <= 767 && isShrinked) {
                toggleShrink();
            }
            isPlaying ? pauseMusic() : playMusic();
        }
    
        function playNext() {
            if (window.innerWidth <= 767 && isShrinked) {
                toggleShrink();
            }
            const index = getRandomIndex();
            audio.src = musicList[index].src;
            updateMusicInfo(index);
            audio.currentTime = 0;
            playCore();
            setTimeout(() => {
                if (window.innerWidth <= 767 && !isShrinked) {
                    isShrinked = true;
                    musicPlayer.classList.add('shrink');
                }
            }, 2000);
        }
    
        playBtn.addEventListener('click', togglePlay);
        playBtn.addEventListener('touchstart', (e) => { e.preventDefault(); togglePlay(); });
        nextBtn.addEventListener('click', playNext);
        nextBtn.addEventListener('touchstart', (e) => { e.preventDefault(); playNext(); });
        musicPlayer.addEventListener('click', (e) => {
            if (e.target === musicPlayer && window.innerWidth <= 767) {
                toggleShrink();
            }
        });
        musicPlayer.addEventListener('touchstart', (e) => {
            if (e.target === musicPlayer && window.innerWidth <= 767) {
                e.preventDefault();
                toggleShrink();
            }
        }, { passive: false });
        audio.addEventListener('ended', playNext);
        audio.addEventListener('timeupdate', saveState);
        window.addEventListener('resize', () => {
            if (window.innerWidth > 767) {
                musicPlayer.classList.remove('shrink');
            }
        });
    
        const hasCache = restoreState();
        if (hasCache) {
            isPlaying && playCore();
        } else {
            playMusic();
        }
    
        function initOnUserAction() {
            if (isInitiated) return;
            playMusic();
            document.removeEventListener('click', initOnUserAction);
            document.removeEventListener('touchstart', initOnUserAction);
        }
        document.addEventListener('click', initOnUserAction);
        document.addEventListener('touchstart', initOnUserAction, { passive: false });
    });
    </script>

2. 音乐文件配置
将 MP3 音乐文件上传至网站/UGC/目录（若无该目录请自行创建）
如需修改音乐文件路径 / 添加 / 替换歌曲，直接修改代码中musicList数组即可，格式如下：

const musicList = [
    { src: '音乐文件路径', name: '歌曲名', singer: '歌手名' },
    // 按需添加更多歌曲
];

3. 基础操作
电脑端：直接点击「播放 / 暂停」「下一曲」按钮操作，全程显示歌曲信息
手机端：
点击按钮自动展开播放器，播放后 2 秒自动收缩
点击播放器空白处，可手动切换收缩 / 展开状态
切歌时自动展开显示新歌曲信息，2 秒后恢复收缩

]]> 4 https://blog.pet111.cn/archives/511/#comments https://blog.pet111.cn/feed/category/xuexi/ 利用百度地图做博客足迹地图HTML源码（可更改地图样式） https://blog.pet111.cn/archives/440/ https://blog.pet111.cn/archives/440/ Wed, 21 May 2025 17:23:00 +0800 MR.李先森 简介

之前发过一些关于足迹的源码，后来由于地图的更新或者一些限制无法在使用，又重新写了一套，这套足迹使用百度地图来实现的，我觉得要比之前好得多，加入了图文，足迹logo，等等。具体可到我的关于页面查看。

源码截图

使用说明

将源码下载好后首先我们要到百度地图开放平台注册一个自己的账号，并设置好自己的域名信息，等待审核通过后 拿到自己的AK码。然后添加至首页的` <!-- 引入百度地图API -->

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=这里是你的AK"></script>`这个位置即可。

地图样式可在个性化地图界面设置地图样式。然后将代码添加至` // 设置地图样式

    map.setMapStyleV2({
        styleId: '这里是地图样式'ID
    });`

数据信息再markers.js中进行修改，一定要注意格式，不然会不显示的。

// 坐标查询：https://api.map.baidu.com/lbsapi/getpoint/index.html

        var markers = [
            {
        latLng: [125.341771,43.873726],
        name: "长春市",
        icon: "/footprint/zj.png",
        desc: "长春市"
    },
    {
        latLng: [124.831767,45.148014],// 图文带跳转的
        name: "松原市",
        icon: "/footprint/zj.png",// 这是足迹logo
        desc: "松原市。",// 这里是简介
        photo: [
            "/usr/uploads/2025/01/2486362157.jpg",
            "/usr/uploads/2025/01/1044572061.jpg",
            "/usr/uploads/2025/01/1454283446.jpg",
            "/usr/uploads/2025/01/3919603999.jpg",
        ],
        links: [
            "/index.php/archives/138/",// 第一个图文带跳转的链接
            "/index.php/archives/138/",// 第2个图文带跳转的链接
            "/index.php/archives/138/",// 第3个图文带跳转的链接
            "/index.php/archives/138/",// 第4个图文带跳转的链接
        ]
    },
    {
        latLng: [128.091721,42.05933],// 单独文字介绍的
        name: "长白山",
        icon: "/footprint/zj.png",        
        desc: "长白山"
    },
    {
        latLng: [128.251537,43.32305],
        name: "六顶山",
        icon: "/footprint/zj.png",        
        desc: "六顶山"
    },
    {
        latLng: [126.992893,46.644393],
        name: "绥化市",
        icon: "/footprint/zj.png",        
        desc: "绥化市"
    },

        ];

喜欢什么样式添加什么样式就可以了。

调试

数据添加好了之后可以先访问一下看下有没有错误，没有的可以就可以在页面或者直连的方式进行访问查看了。如果是加入嵌入式。再加入如下 原生html 代码即可！

<iframe scrolling=no style="min-height:480px !important;" src="你的足迹地址" width="100%" height="100%"></iframe>

源码下载

点击下载

免责声明

本站提供的资源，均来自网络，如有版权争议与本站无关，所有内容及软件的文章仅限用于个人学习和研究目的。下载者不得将上述内容用于商业或者非法用途，否则，一切后果请用户自行自负，我们不保证内容的长久可用性，通过使用本站内容随之而来的风险与本站无关，您务必在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，或购买注册，以得到更好的正版服务。如本站侵犯了您的权益，请致信E-mail：937745580@qq.com

]]> 7 https://blog.pet111.cn/archives/440/#comments https://blog.pet111.cn/feed/category/xuexi/ Adobe Photoshop 2025 https://blog.pet111.cn/archives/411/ https://blog.pet111.cn/archives/411/ Thu, 24 Oct 2024 21:27:00 +0800 MR.李先森 1 https://blog.pet111.cn/archives/411/#comments https://blog.pet111.cn/feed/category/xuexi/ 情韵歌曲-陈瑞《情罪》MTV版本 伤感流行歌曲欣赏 https://blog.pet111.cn/archives/402/ https://blog.pet111.cn/archives/402/ Wed, 02 Oct 2024 21:48:00 +0800 MR.李先森

【MV来源：酷我音乐 仅用于个人欣赏，如有侵权联系删除。】

我曾看到过一个舞者与歌曲中相匹配：他叫马克，妻子是一位舞者，但是妻子突然离世，马克有点精神失常，从此就经常在大街上跳舞，以此怀念自己的挚爱。

不品人间酒，不知其中醉；
不陷世间情，不知其中累；
不经沧桑苦，不知其中味；
爱过知情重，醉过知酒浓。

写歌的人用了脑，唱歌的人用了心,
听歌的人用了情，有故事的人流了泪。

不怕音乐太好听，就怕歌词入了心 ，
愿你们只听曲中意，不做曲中人。
珍惜眼前人，珍惜今生缘！

]]> 0 https://blog.pet111.cn/archives/402/#comments https://blog.pet111.cn/feed/category/xuexi/ 美化日志主题，我很满意嘻嘻。 https://blog.pet111.cn/archives/387/ https://blog.pet111.cn/archives/387/ Sun, 15 Sep 2024 15:01:00 +0800 MR.李先森 前些日子拿到这套主题，第一感觉是清爽，简洁。挺喜欢的，但是跟我实际使用可能稍微差了一点点功能于是动手改造一下。老铁们还有什么好的建议欢迎提出。增加完善。

主题新增功能

-新增折叠面板
-新增进度条
-新增文字居中样式
-新增文字呼吸跑马灯
-新增彩色分隔条

/优化整体页面。
/修复已知问题
/修复专题页面

功能：

浏览进度、暗黑模式、文章目录、相册、善念（说说）、归档页、专题页面、自定义字体、自定义菜单、自定义CSS等

编辑器功能：

行内代码、代码块、表格、视频、音频、影集（画廊）、时间线、下载按钮、任务清单、原生代码、折叠面板、进度条、文字居中
跑马灯文字、彩色分隔条、回复可见等...（陆续更新）

演示地址：

]]> 1 https://blog.pet111.cn/archives/387/#comments https://blog.pet111.cn/feed/category/xuexi/ JP-Word简谱编辑软件 https://blog.pet111.cn/archives/380/ https://blog.pet111.cn/archives/380/ Wed, 04 Sep 2024 22:24:00 +0800 MR.李先森 0 https://blog.pet111.cn/archives/380/#comments https://blog.pet111.cn/feed/category/xuexi/ OPPO R11t-官方固件-线刷包-R11系列 https://blog.pet111.cn/archives/372/ https://blog.pet111.cn/archives/372/ Sat, 24 Aug 2024 20:19:00 +0800 MR.李先森 今天朋友的一款OPPO R11t手机忘记了密码，因为手机比较老，通过手机本身根本恢复不了，无奈只能刷机，在网上找了半天的刷机包最后也算是找到了。现将刷机包分享出来，有需要的下载即可。

一、准备工作

1、手机要有50%以上的电量以免后续电量不足。

2、下载OPPO官方驱动：点击下载

3、下载并解压固件包：OPPO R11t-官方固件-线刷包-R11系列 点击下载

4、刷机前将重要数据备份，线刷会清除所有数据，包括密码，深度还原出厂设置。

二、开始刷机

1、首先安装OPPO官方驱动

2、解压缩固件包后，双击运行工具“MsmDownloadTool.exe”，此时会提示选择型号。运行工具后，选择型号如下：

OPPO R11 选择 16051
OPPO R11T 选择 16052
OPPO R11 Plust 选择 16102
OPPO R11 Plus 选择 16103
OPPO R11 Pluskt 选择 16116
OPPO R11 Plusk 选择 16118

选择完型号后，所有选项基本默认无需改动（售后升级模式）

  • 手机在关机状态下，按住音量上键、下键不松手，插上USB线连接电脑，设备管理器将识别到一个9008字样的端口，这时就可以松手了。
  • 或者当看到MsmDownloadTool上连接状态由N/A变为已连接时就可以松手了，工具与设备管理器是同时识别的。
  • MsmDownloadTool上点击“开始”或“Start”就开始刷机了。
  • 刷机途中请勿触碰或者拔掉手机，以免中断。
  • 直到提示“文件下载完毕”恭喜你刷机成功了，手机将自动重启，第一次开机时间有点长，以后在开机就好了，耐心等待。

特别说明：如果不显示端口COM和LPT，或者未识别的设备情况，则需要安装QUSB_BULK驱动，

下载地址：https://www.ilanzou.com/s/ZSyynY3z

QUSB_BULK驱动安装教程：

电脑端打开设备管理器，看到新设备QUSB_BULK，右键安装驱动, 浏览计算机以查找驱动软件,选择解压出来的高通驱动文件夹确定
如果弹出签名，选始终安装。

]]> 0 https://blog.pet111.cn/archives/372/#comments https://blog.pet111.cn/feed/category/xuexi/ 知识问答和多个趣味API接口嵌入博客（附源码） https://blog.pet111.cn/archives/337/ https://blog.pet111.cn/archives/337/ Mon, 05 Aug 2024 22:59:00 +0800 MR.李先森 前些天我的博客站点的api签名突然就不好用了，后来发现是api接口出现了问题，随后就在网上找了一些API接口发现“天聚数行”挺有意思，接口也比较全，然后就写了几个接口，没怎么做页面美化，因为能力有限。我觉得给孩子看看还是挺好的。源码包含：十万个为什么、60秒读世界、故事大全、每日一问精彩阅读、古籍名句、脑筋急转弯、诗词问答、唐诗三百首等。源码和图片我都给大家准备好了，有需要的就下载使用吧！

注册账号

首先要到 天聚数行 注册一个账号， 免费版本每天可以使用接口100次 ，拿到自己的API秘钥添加至html代码中的秘钥区域即可。我都有标注的。

例：

    <script>
        // 你的API密钥
        const apiKey = '@@@@@@@@@@@@@@@@@@'; // 替换为你的APIKEY密钥
        const apiUrl = `https://apis.tianapi.com/poetry/index?key=${apiKey}`;

嵌入代码

将所有的html的秘钥设置好后上传至你服务器，再你的博客当中在嵌入即可代码如下。

<iframe src="/这里写你源码的位置.html" width="100%" height="1000"></iframe>

图片展示

Test
Test
Test

源码下载

{hide}
{cloud title="趣味API" type="lz" url="https://www.ilanzou.com/s/6g2phcL" password=""/}
{/hide}

]]> 0 https://blog.pet111.cn/archives/337/#comments https://blog.pet111.cn/feed/category/xuexi/ iOS17屏蔽更新，(附描述文件) https://blog.pet111.cn/archives/327/ https://blog.pet111.cn/archives/327/ Tue, 30 Jul 2024 14:01:00 +0800 MR.李先森 就在前不久，我手欠升级了IOS18之后，导致手机内的数据丢失，后来被迫无奈仅仅恢复了3月份的17.5的备份，就在今天，苹果又提示更新，心想这次无论如何也不会再更新了。但是面对多少有点强迫症的我，看着桌面有个小红点，心里就不舒服，于是今天打算就将系统定格在IOS17.5.1，此描述文件仅适用于IOS 17.x

一、修改手机时间

首先点击手机的 设置-通用-日期与时间 ，将日期修改到 2023年12月13日，时间随意 完成后进行下一步。

二、下载描述文件

（1）在完成第一步的时间这时候就可以下载描述文件了，我们用手机自带的 Safari浏览器 访问 https://wwl.lanzouj.com/imfQZ25ypzif 或点击 传送门

（2）之后点击下载，在弹出的安装配置描述文件弹窗时，点击 允许

注：如果出现选取设备弹窗，则选择手机即可。

三、安装描述文件

接下来就是安装描述文件，我们依次点击 设置-通用-VPN与设备管理 ，接着你会发现在配置描述文件中出现一个名为 tv OS 17 Beta........ 的文件，我们点击这个描述文件将其安装后重启手机即可（其实不重启也行）。

此刻我们在依次点击设置-通用-软件更新会出现IOS 17.x.x 已是最新版本，至此已经完成。

四、恢复时间

安装完成后 务必立即改回正确系统时间。

说明

1， iOS 17 屏蔽更新的方法，是依靠安装tv OS 测试版的描述文件实现的，原理就是让 iPhone 的更新通道转移到tv OS 从而实现彻底屏蔽更新。

2，目前网上流传出来的tvOS 17 描述文件，是有“有效期”的，时间截止到2023 年 12 月 14 日

3，后续如果想要解除屏蔽更新，只需要移除屏蔽更新文件即可，选择“移除描述文件”，根据提示输入设备密码，移除成功后重新启动设备，返回“软件更新”中查看即可。

4，当然还有一个办法就是将固件下载后再删除，个人觉得费时间，再此就不演示了。

免责声明

本站提供的资源，均来自网络，如有版权争议与本站无关，所有内容及软件的文章仅限用于个人学习和研究目的。下载者不得将上述内容用于商业或者非法用途，否则，一切后果请用户自行自负，我们不保证内容的长久可用性，通过使用本站内容随之而来的风险与本站无关，您务必在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，或购买注册，以得到更好的正版服务。如本站侵犯了您的权益，请致信E-mail：937745580@qq.com

]]> 0 https://blog.pet111.cn/archives/327/#comments https://blog.pet111.cn/feed/category/xuexi/ 剪咉多版本合集（PC+手机） https://blog.pet111.cn/archives/322/ https://blog.pet111.cn/archives/322/ Mon, 22 Jul 2024 20:00:00 +0800 MR.李先森 剪映5.5-5.9：

{hide}

{cloud title="剪映5.5-5.9版" type="lz" url="https://www.ilanzou.com/s/ZyaCgFj" password=""/}

{/hide}

剪映6.0：

{hide}

{cloud title="剪映6.0版" type="lz" url="https://www.ilanzou.com/s/Y4uCgTn" password=""/}

{/hide}

剪映国际版：

{hide}

{cloud title="剪映国际版" type="lz" url="https://www.ilanzou.com/s/qngCgt1" password=""/}

{/hide}

剪映安卓版：

{hide}

{cloud title="手机版" type="default" url="https://pan.quark.cn/s/f26f40ac651e#/list/share" password=""/}

{/hide}

免责声明

{alert type="info"}

本站提供的资源，均来自网络，如有版权争议与本站无关，所有内容及软件的文章仅限用于个人学习和研究目的。下载者不得将上述内容用于商业或者非法用途，否则，一切后果请用户自行自负，我们不保证内容的长久可用性，通过使用本站内容随之而来的风险与本站无关，您务必在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，或购买注册，以得到更好的正版服务。如本站侵犯了您的权益，请致信E-mail：937745580@qq.com

{/alert}

]]> 0 https://blog.pet111.cn/archives/322/#comments https://blog.pet111.cn/feed/category/xuexi/