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>

打印页面