CSS 数据类型 - number

CSS <number>数据类型表示标量值，通常用于数值数量。它是任何数值的通用术语，可以包括整数、小数、负数和科学记数法。

CSS <number> - 有效语法

以下是有效号码的列表：

Number	描述
21	原始<整数>也是一个<数字>。
3.03	正分数
-264.22	负分数
0.0	零
+0.0	零，带前导 +。
-0.0	零，带前导 -。
.55	不带前导零的小数。
11e6	科学记数法。
-5.3e-4	复杂的科学记数法。

CSS <number> - 语法无效

以下是无效号码的列表：

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（）函数，用于指定沿 Cubic-Bezier 曲线的控制点。

这些控制点的 x 和 y 坐标由 4 个 <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>

打印本页

CSS 数据类型 - number

CSS <number> - 有效语法

CSS <number> - 语法无效

CSS <number> - 检查有效/无效

CSS <number> - cubic-bezier（） 函数

CSS <number> - cubic-bezier（）函数