在JavaScript和HTML中获取系统当前时间是Web开发中常见的需求，尤其在构建动态网页时，实时显示日期和时间的功能十分普遍。以下将详细介绍如何通过JavaScript和HTML实现这一功能。
JavaScript提供了内置的Date对象，它能帮助我们获取当前系统的日期和时间。`new Date()`构造函数用于创建一个表示当前日期和时间的新Date对象。例如：
```javascript
var today = new Date();
```
接下来，我们可以使用Date对象的方法来获取各个部分的时间：
- `getFullYear()`：返回四位数的年份，如2023。
- `getMonth()`：返回月份（0-11），需要加1以得到实际的1-12。
- `getDate()`：返回月份中的日期，1-31。
- `getHours()`：返回24小时制的小时数，0-23。
- `getMinutes()`：返回分钟数，0-59。
- `getSeconds()`：返回秒数，0-59。
为了确保显示的日期和时间格式一致，我们需要处理个位数的情况。例如，月份和日期小于10时，前面补零。这是通过条件判断和字符串拼接实现的：
```javascript
var months = (today.getMonth() + 1 < 10 ? "0" : "") + (today.getMonth() + 1);
var days = today.getDate() < 10 ? "0" + today.getDate() : today.getDate();
// ... 对小时、分钟和秒做类似处理 ...
```
在HTML中，我们可以创建一个元素，用于显示时间，例如一个`<span>`元素，并通过JavaScript来更新它的内容。这里我们定义了一个名为`Clock`的ID，以便在JavaScript中引用：
```html
<span id="Clock"></span>
```
我们编写JavaScript代码来定时更新时间。`setTimeout`函数可以设置一个延迟执行的函数，这里设置为1000毫秒（即1秒）后执行`tick`函数：
```javascript
function tick() {
// 获取和格式化时间的逻辑...
Clock.innerHTML = timeString;
window.setTimeout("tick()", 1000);
}
// 当页面加载完成后执行tick函数
window.onload = tick;
```
通过这种方式，`tick`函数会在每次调用后的一秒再次调用自身，实现时间的实时更新。整个HTML和JavaScript代码片段就是一个简单的实时钟示例，可以在浏览器中运行，动态显示系统当前时间。
JavaScript和HTML结合，利用Date对象的方法和DOM操作，可以轻松地实现在网页上获取并显示系统当前时间。这样的功能在各种类型的Web应用中都有广泛的应用，例如日程管理、在线聊天、倒计时等。掌握这些基础知识对于前端开发者来说非常重要，因为它们是构建动态交互界面的基础。
