jQuery UI Spinner（旋转器）实例
Spinner 是 jQuery UI 中用于数字输入的组件，它将普通 <input type="number"> 增强为带上下箭头的旋转器，支持步长、范围限制、动画、自定义图标等。常用于数量选择、评分调整、年龄输入、表单数字验证等场景。
官方演示地址：https://jqueryui.com/spinner/
下面提供几个渐进实例，从基础到高级，代码使用最新 CDN，可直接复制到 HTML 文件测试。
1. 基础旋转器
在输入框添加上下箭头，支持键盘 ↑↓ 键调整。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Spinner 基础示例</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="//code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
</head>
<body>
<label>数量：</label>
<input id="spinner" value="1">
<script>
$(function() {
$("#spinner").spinner();
});
</script>
</body>
</html>2. 常用选项（范围、步长、动画）
min/max：限制范围。step：每次增减步长。animate：拖动箭头时动画效果。
<input id="spinner2" value="50">
<script>
$("#spinner2").spinner({
min: 0, // 最小值
max: 100, // 最大值
step: 5, // 步长 5
animate: "fast", // 动画速度
culture: "zh-CN" // 中文本地化（需引入 i18n 文件）
});
</script>3. 自定义图标 + 事件监听
替换默认箭头图标，使用事件回调获取变化值。
<input id="spinner3" value="10">
<p>当前值: <span id="display">10</span></p>
<script>
$("#spinner3").spinner({
icons: {
down: "ui-icon-circle-triangle-s", // 向下箭头图标
up: "ui-icon-circle-triangle-n" // 向上箭头
},
spin: function(event, ui) { // 每次旋转时触发
$("#display").text(ui.value);
console.log("新值: " + ui.value);
},
change: function(event, ui) { // 值最终变化时（包括手动输入）
console.log("值已更改: " + ui.value);
}
});
</script>4. 禁用输入 + 动态设置值
<input id="spinner4" value="0">
<script>
$("#spinner4").spinner({
disabled: false, // 初始启用，可动态禁用
create: function() { console.log("旋转器创建"); }
});
// 示例：动态禁用
// $("#spinner4").spinner("disable");
// 动态设置值
// $("#spinner4").spinner("value", 25);
</script>小技巧：
- 动态操作：
$("#spinner").spinner("value", 10);设置值，$("#spinner").spinner("value");获取值。 - 本地化：引入
jquery-ui-i18n.js支持中文数字格式。 - 验证：结合
change事件实现输入验证（如只允许整数）。 - 移动端：默认支持触摸滑动调整。
Spinner 常用于电商购物车数量、表单年龄选择、游戏分数调整。如果你需要 与 Slider 结合的范围旋转器、小数支持（decimals） 示例，或 完整表单集成，请提供更多细节！
