CSS 数据类型 - <time>



CSS 的 <time> 数据类型表示一段时间。它用于需要时间值的属性,例如 animation-durationtransition-duration 和其他一些属性。<time> 的值可以用秒 (s)、毫秒 (ms) 或其他时间单位指定。

可能的值

以下单位可用于 <time> 数据类型

  • s - 表示以秒为单位的时间间隔。

  • ms - 表示以毫秒为单位的时间间隔。

语法

<number>unit

<time> 数据类型中的 <number> 后面是上面提到的特定单位。可以选择在其前面添加单个 +- 符号。

单位文字和数字不应分开,就像其他维度一样。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS <time> - 有效语法

以下是有效时间的列表

时间 描述
19.6 正整数
-123ms 负整数。
2.6ms 非整数
10mS 虽然不需要使用大写字母,但单位不区分大小写。
+0s 带单位和前导 + 的零
-0ms 零、单位和前导 -

CSS <time> - 无效语法

以下是无效时间的列表

时间 描述
0 对于 <time>,无单位的零无效,但对于 <length> 则允许。
14.0 这缺少单位,因此它是 <number> 而不是 <time>。
9 ms 数字和单位之间不允许有空格。

CSS <time> - 有效/无效时间检查

以下示例允许您检查提供的输入是有效时间还是无效时间

Open Compiler
<html> <head> <style> body { font-family: Arial, sans-serif; } .container { width: 50%; margin: 50px auto; text-align: center; } label { margin-right: 10px; } input { padding: 5px; margin-right: 10px; } button { padding: 5px 10px; cursor: pointer; } #result { margin-top: 20px; font-weight: bold; } </style> </head> <body> <div class="container"> <h2>Time Input Validation</h2> <form id="timeForm"> <label for="timeInput">Enter a time:</label> <input type="text" id="timeInput" name="timeInput" placeholder="e.g., 5s or -200ms or 10mS"> <button type="button" onclick="validateTime()">Check</button> </form> <p id="result"></p> </div> <script> function validateTime() { const userInput = document.getElementById('timeInput').value.trim(); // Regular expressions to match valid time inputs const validTimeRegex = /^(0|(\+|-)?\d+(\.\d+)?(s|ms))$/i; if (validTimeRegex.test(userInput)) { document.getElementById('result').innerText = 'Valid time input!'; } else { document.getElementById('result').innerText = 'Invalid time input!'; } } </script> </body> </html>

CSS <time> - 与 transition-duration 一起使用

在 CSS 中的 transition-duration 中使用时,<time> 数据类型定义过渡效果的持续时间,指示过渡完成需要多长时间。

它可以精确控制 CSS 过渡的时间,并可以用毫秒或秒定义。

Open Compiler
<html> <head> <style> button { transition-property: background-color, color, transform; transition-duration: 3s; transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); background-color: #2ecc71; color: white; border: none; padding: 15px 30px; font-size: 18px; cursor: pointer; border-radius: 8px; outline: none; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } button:hover { background-color: #3498db; color: #fff; transform: translateY(-3px); box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); } </style> </head> <body> <button>Hover Over This Button for 3 seconds</button> </body> </html>
广告