什么是 readOnly 属性
readOnly 属性是 HTML 元素的一个布尔属性，用来指定一个输入框是否为只读。当一个输入框被设置为只读时，用户可以看到输入框中的内容，但无法修改内容。这在一些情况下非常有用，比如展示信息或者防止用户误操作。
使用 readOnly 属性实现 Input Time 只读
要实现一个只读的时间输入框，我们只需要在 <input type="time> 元素中添加 readOnly 属性即可。
<input type="time" readOnly>
上面的代码片段中，我们创建了一个时间输入框，并将其设置为只读。用户可以看到时间的值，但无法修改时间。
示例代码
下面是一个更完整的示例，展示了如何创建一个只读的时间输入框，并显示当前时间：
// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>只读时间输入框</title>
</head>
<body>
<h1>只读时间输入框示例</h1>
<input type="time" readOnly id="timeInput">
<script>
const timeInput = document.getElementById('timeInput');
const now = new Date();
const hours = now.getHours().toString().padStart(2, '0');
const minutes = now.getMinutes().toString().padStart(2, '0');
timeInput.value = `${hours}:${minutes}`;
</script>
</body>
</html>在这个示例中，我们首先创建了一个时间输入框，并设置其为只读。然后使用 JavaScript 获取当前时间，并将时间值填充到输入框中。
总结
通过使用 readOnly 属性，我们可以很容易地实现一个只读的时间输入框。这在一些需要展示时间信息而不允许用户修改的场景下非常有用。希望本文能帮助你更好地理解和应用 Input Time 的 readOnly 属性。