CSS 資料型別 - <number>

CSS <number> 資料型別表示一個標量值，通常用於表示數值量。它是一個通用術語，表示任何數值，可以包括整數、小數、負數和科學計數法。

CSS <number> - 有效語法

以下是有效數字的列表

數字	描述
21	原始的 <integer> 也是一個 <number>。
3.03	正分數
-264.22	負分數
0.0	零
+0.0	零，前面帶 + 號。
-0.0	零，前面帶 - 號。
.55	沒有前導零的分數。
11e6	科學計數法。
-5.3e-4	複雜的科學計數法。

CSS <number> - 無效語法

以下是無效數字的列表

數字	描述
32.	小數點後必須至少有一個數字。
+-45.2	只能有一個前導 +/-。
14.5.6	只能有一個小數點。

CSS <number> - 檢查有效/無效

在以下示例中，輸入值並檢查輸入的數字是否有效或無效

<html>
<head>
<style>
   body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      margin: 0;
      padding: 20px;
      text-align: center;
   }
   h1 {
      color: #333;
   }
   #input {
      padding: 10px;
      margin: 20px;
      font-size: 16px;
   }
   #result {
      font-size: 18px;
      margin-top: 10px;
   }
   .valid {
      color: green;
   }
   .invalid {
      color: red;
   }
   #submitBtn {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
   }
</style>
</head>
<body>
<h1>Enter the number to check if it is valid or invalid</h1>
<label for="input">Enter a number:</label>
<input type="text" id="input" placeholder="Enter a number">
<button id="submitBtn" onclick="checkNumberValidity()">Submit</button>
<div id="result"></div>
<script>
   function checkNumberValidity() {
      const inputElement = document.getElementById('input');
      const resultElement = document.getElementById('result');
      const inputValue = inputElement.value.trim();
      // Regular expression for validating numbers
      const numberRegex = /^([+-]?(\d+(\.\d*)?|\.\d+)([eE][+-]?\d+)?|[+-]?Infinity)$/;
      if (numberRegex.test(inputValue)) {
         resultElement.textContent = 'Valid Number';
         resultElement.className = 'valid';
      } 
      else {
         resultElement.textContent = 'Invalid Number';
         resultElement.className = 'invalid';
      }
   }
</script>
</body>
</html>

CSS <number> - cubic-bezier() 函式

在以下示例中，<number> 資料型別用於 cubic-bezier() 函式，以指定三次貝塞爾曲線上控制點的座標。

這些控制點的 x 和 y 座標由四個 <number> 值確定，這些值範圍從 0 到 1，它們影響過渡效果的加速和時間。

<html>
<head>
<style>
   .number {
      transition-property: font-size, color;
      transition-duration: 1.5s;
      font-size: 24px;
      color: blue;
      margin: 10px;
      padding: 10px;
      display: inline-block;
      transition-timing-function: cubic-bezier(.17, .67, .83, .67);
   }
   .number:hover {
      font-size: 36px;
      color: red;
   }
</style>
</head>
<body>
<span class="number">Hover over this text!</span>
</body>
</html>

列印頁面