来自http://www.sitepoint.com/article/counter-widgets-javascript-html
按照下面的方法自已做一个可调节数值的窗口部件,类似于下面截图红圈中表示的控件-具有上下箭头式按钮可以调节指定范围内的数值大小:

到这里下载http://www.sitepoint.com/examples/counter/counter.zip,其中包含了脚本代码、示例和文档
(说明:里面还包含了一个基于后台验证的php程序页面文件testcounter.php)<!--StartFragment -->
简要说明一下怎样使用这个数值调节器:
下载后的文件解压,将createcounter.js嵌入你的HTML文档中
添加一个专门的id或name属性值到text控件中:
<!--StartFragment --> <!--StartFragment --> <input type="text" size="3"
name="passengers_ctr_1_12" id="passengers_ctr_1_12" value="1" >
id或name的值像下面这样命名:
(any name)_ctr_(minimum value)_(maximum value)
(任何名称)_ctr_(最小值)_(最大值)
像下面的命名都是有效的:
foo_ctr_0_10
数值被控制在0-10范围内
bar_ctr_-10_10 数值被控制在-10-10范围内
baz_ctr_1_999 数值被控制在1-999范围内
这个调节器的一些缺点(改进中):缺少上、下按钮进行调节,不支持键盘控制。
受浏览器环境的限制(如果浏览器的Javascript被关闭),它不会工作。另外,不保证它在多个浏览器中均能正常运行。
分享到:
相关推荐
这种组件非常适合用于需要用户交互的应用场景,如音频播放器中的音量控制条、图片编辑工具中的亮度调节器等。 通过这个示例,你可以进一步扩展功能,比如增加触摸支持、优化用户界面反馈等,使得滑动条更加灵活多变...
文章通过具体的示例代码,逐步向读者展示了如何使用HTML和JavaScript制作这样一个有用的调色工具。对于希望学习前端交互设计的开发者来说,这不仅是一个实用的项目,同时也是一个很好的实践机会,来加深对HTML表单...
这款插件适用于各种场景,如网页中的图片轮播、数值调节器、进度条等,提供了丰富的自定义选项和事件处理,以满足不同项目的需求。 在前端开发中,滑块是一种常见的用户界面元素,可以直观地展示和调整数值或展示一...
这个旋转按钮不仅可以用作普通的输入字段,还可以用作调节器,例如控制音量、亮度或任何需要连续数值调整的场景。它允许开发者自定义许多视觉和行为属性,如颜色、大小、指针样式、背景、字体以及旋转范围等。 在...
在网页设计和开发中,jQuery是一个非常流行的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互。"Jquery折叠菜单"是一个常见的功能,用于创建交互式的树形导航结构,使得用户可以方便地展开和折叠...
RGBA1是一个专为Factorio模组制作设计的颜色选择器工具,它采用了RGBA色彩模式,并且颜色的各个分量(红、绿、蓝、 alpha)都使用0-1之间的浮点数值来表示。在传统的RGB色彩模式中,颜色的每个分量通常用0到255的...
CSS3是层叠样式表的最新版本,它引入了许多新的选择器、属性和值,如过渡(transition)、动画(animation)、阴影(box-shadow)和渐变(gradient),使得网页元素的外观和动态效果更为丰富和细腻。 四种不同的...
滑块是一种常见的用户界面元素,通常用于调节数值或开关状态。在Web开发中,HTML5的`<input type="range">`元素可以创建一个基础的滑块,但要实现动画效果,我们需要借助P5.JS这样的库。滑块的基本结构包括滑块轨道...