jQuery UI Spinner（旋转器）实例
Spinner是 jQuery UI 中用于数字输入的组件，它将普通<input type="number">增强为带上下箭头的旋转器，支持步长、范围限制、动画、自定义图标等。常用于数量选择、评分调整、年龄输入、表单数字验证等场景。
官方演示地址：https://jqueryui.com/spinner/
下面提供几个渐进实例，从基础到高级，代码使用最新 CDN，可直接复制到 HTML 文件测试。
1.基础旋转器
在输入框添加上下箭头，支持键盘 ↑↓ 键调整。
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>jQuery UI Spinner 基础示例</title><linkrel="stylesheet"href="//code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css"><scriptsrc="//code.jquery.com/jquery-3.6.0.min.js"></script><scriptsrc="//code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script></head><body><label>数量：</label><inputid="spinner"value="1"><script>$(function(){$("#spinner").spinner();});</script></body></html>2.常用选项（范围、步长、动画）
min/max：限制范围。step：每次增减步长。animate：拖动箭头时动画效果。
<inputid="spinner2"value="50"><script>$("#spinner2").spinner({min:0,// 最小值max:100,// 最大值step:5,// 步长 5animate:"fast",// 动画速度culture:"zh-CN"// 中文本地化（需引入 i18n 文件）});</script>3.自定义图标 + 事件监听
替换默认箭头图标，使用事件回调获取变化值。
<inputid="spinner3"value="10"><p>当前值:<spanid="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.禁用输入 + 动态设置值
<inputid="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）示例，或完整表单集成，请提供更多细节！
)