jquery 数字微调控件

基础概念

jQuery数字微调控件（Numeric Spinner Widget）是一种用户界面元素，允许用户通过增加或减少按钮来调整数值。这种控件通常用于需要精确控制数值的场景，如设置数量、价格、时间等。

类型

基本数字微调控件：提供增加和减少按钮，用户可以通过点击按钮来调整数值。
带步长的数字微调控件：允许用户设置每次增加或减少的步长。
带最小值和最大值的数字微调控件：限制数值的范围，防止用户输入超出预期的数值。

应用场景

购物车：调整商品数量。
价格调整：在电商网站中调整商品价格。
时间设置：在日历应用中调整时间。
配置参数：在设置页面中调整各种参数。

示例代码

以下是一个使用jQuery UI实现的数字微调控件的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Numeric Spinner Example</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
    <div>
        <label for="spinner">Quantity:</label>
        <input id="spinner" type="text">
    </div>

    <script>
        $(function() {
            $("#spinner").spinner({
                min: 0,
                max: 100,
                step: 1,
                start: 50
            });
        });
    </script>
</body>
</html>