1. 首页
  2. CSS 菜鸟教程
  3. CSS 数据类型 - number

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 数据类型 - percentage CSS 函数 - scale3d() >>