首先安装Rainmeter并创建MyStudyClock皮肤项目，接着配置WebParser读取本地HTML文件中的学习时长数据，然后通过Meter组件将数据以文本形式显示在桌面，最后确保HTML文件结构正确并能自动刷新显示。
如果您希望在Windows桌面上实时显示通过HTML脚本统计的学习时长，可以借助Rainmeter工具实现高度自定义的可视化效果。通过配置皮肤和数据源，您可以将本地或网络中的学习记录以动态方式呈现在桌面。
本文运行环境：Surface Laptop 5，Windows 11
一、安装并配置Rainmeter基础环境
Rainmeter是一款强大的桌面定制工具，支持通过皮肤显示系统信息、网络状态、自定义脚本等内容。要实现学习时长的显示，首先需要搭建基础运行环境。
1、访问Rainmeter官方网站，下载最新版本安装包并完成安装。
立即学习“前端免费学习笔记（深入）”；
2、启动Rainmeter后，默认会加载一些示例皮肤，可先关闭不需要的皮肤以保持桌面整洁。
3、在Rainmeter管理界面中，确保“加载”选项已启用，以便后续添加自定义皮肤。
二、创建读取HTML数据的Measure组件
Rainmeter通过Measure（测量器）从外部文件或接口获取数据。您需要设置一个WebParser类型的Measure来解析本地HTML文件中的学习时长数据。
1、在“我的文档\Rainmeter\Skins”目录下新建文件夹“MyStudyClock”，并在其中创建“config.ini”文件。
2、编辑config.ini，在[Rainmeter]节下声明基本参数：
Update=1000
DynamicWindowSize=1
AccurateText=1
3、添加WebParser Measure，指向本地HTML文件路径：
[MeasureHTML]
Measure=WebParser
URL=file://C:/data/studytime.html
RegExp=(?siU)
StringIndex=1
UpdateRate=60
三、设计皮肤界面显示学习时长
皮肤的视觉呈现由Meter（表盘）控制，您需要将从HTML提取的数据绑定到文本元素上，实现实时展示。
1、在config.ini中添加以下Meter定义：
[MeterStudyLabel]
Meter=String
FontColor=255,255,255
FontSize=14
FontFace=Segoe UI
Text=今日学习时长：
2、创建动态文本显示区域：
[MeterStudyTime]
Meter=String
MeasureName=MeasureHTML
FontColor=0,255,0
FontSize=16
FontFace=Consolas
Text=%1
X=5
Y=5
四、准备本地HTML数据源文件
Rainmeter依赖稳定的HTML结构来提取数据，因此需要确保目标HTML文件包含明确标识的学习时长字段。
1、创建位于C:\data\studytime.html的静态页面，内容如下：
<html><body>
<div id="study-duration">2小时45分钟</div>
</body></html>
2、确保该文件被正确编码为UTF-8，并可通过浏览器正常访问。
3、每当学习时间更新时，使用脚本或手动修改studytime.html中的数值内容。
五、自动刷新与调试显示结果
为确保桌面显示能及时反映最新学习时长，需验证数据刷新机制是否正常工作。
1、在Rainmeter管理面板右键点击“MyStudyClock”皮肤，选择“重新加载”。
2、观察桌面是否出现“2小时45分钟”的绿色文本。
3、修改studytime.html中的时间值，保存后等待最多60秒，查看桌面显示是否同步更新。
4、若未更新，检查config.ini中URL路径是否使用双斜杠或正确转义，并确认WebParser插件已启用。
