CSS 数据类型

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

可能的值

以下单位可与 <time> 数据类型一起使用:

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

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

语法

<number>unit

<time> 数据类型中的 <number> 后跟上述特定单位。可以选择在其前面添加一个 + 或 - 号。

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

CSS <time>: 有效语法

以下是有效时间列表:

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

CSS <time>: 无效语法

以下是无效时间列表:

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

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

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

<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>时间输入验证</h2>
   <form id="timeForm">
      <label for="timeInput">输入时间:</label>
      <input type="text" id="timeInput" name="timeInput" placeholder="e.g., 5s or -200ms or 10mS">
      <button type="button" onclick="validateTime()">检查</button>
   </form>
   <p id="result"></p>
</div>
<script>
   function validateTime() {
      const userInput = document.getElementById('timeInput').value.trim();
      // 匹配有效时间输入的正则表达式
      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 转换的时间，可以以毫秒或秒为单位定义。

<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>将鼠标悬停在此按钮上 3 秒</button>
</body>
</html>