小鹏汽车的车机系统有一个需求，需要在页面上实时显示当前车辆的电量百分比。请描述如何使用 HTML、CSS 和 JavaScript 实现这个功能。

答题要点

推荐使用分层分析法答题，从 HTML 构建结构、CSS 美化样式、JavaScript 实现功能三个层面分析。关键要点：1. HTML 结构：创建一个元素用于显示电量百分比，如 `<div id='battery-percentage'></div>`。2. CSS 样式：为显示元素设置合适的样式，如字体大小、颜色等。3. JavaScript 数据获取：模拟或从后端获取电量数据。4. JavaScript 实时更新：使用定时器定期更新显示元素的内容。示例思路：首先在 HTML 中创建显示元素，然后用 CSS 美化它，接着使用 JavaScript 模拟电量数据并每秒更新一次显示，代码如下：HTML 中 `<div id='battery-percentage'>0%</div>`，CSS 中设置样式，JavaScript 中 `setInterval(() => { const battery = Math.random() * 100; document.getElementById('battery-percentage').textContent = `${battery.toFixed(0)}%`; }, 1000);`