`
happmaoo
  • 浏览: 4548994 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

用Javascript和HTML制作的数值调节器

阅读更多

来自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被关闭),它不会工作。另外,不保证它在多个浏览器中均能正常运行。
分享到:
评论

相关推荐

    【JavaScript源代码】原生js拖拽功能制作滑动条实例代码.docx

    这种组件非常适合用于需要用户交互的应用场景,如音频播放器中的音量控制条、图片编辑工具中的亮度调节器等。 通过这个示例,你可以进一步扩展功能,比如增加触摸支持、优化用户界面反馈等,使得滑动条更加灵活多变...

    JavaScript使用Range调色及透明度实例

    文章通过具体的示例代码,逐步向读者展示了如何使用HTML和JavaScript制作这样一个有用的调色工具。对于希望学习前端交互设计的开发者来说,这不仅是一个实用的项目,同时也是一个很好的实践机会,来加深对HTML表单...

    一款支持鼠标拖动的jQuery滑块插件nstSlider.zip

    这款插件适用于各种场景,如网页中的图片轮播、数值调节器、进度条等,提供了丰富的自定义选项和事件处理,以满足不同项目的需求。 在前端开发中,滑块是一种常见的用户界面元素,可以直观地展示和调整数值或展示一...

    基于SVG的jQuery旋转按钮插件.zip

    这个旋转按钮不仅可以用作普通的输入字段,还可以用作调节器,例如控制音量、亮度或任何需要连续数值调整的场景。它允许开发者自定义许多视觉和行为属性,如颜色、大小、指针样式、背景、字体以及旋转范围等。 在...

    Jquery折叠菜单

    在网页设计和开发中,jQuery是一个非常流行的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互。"Jquery折叠菜单"是一个常见的功能,用于创建交互式的树形导航结构,使得用户可以方便地展开和折叠...

    RGBA1:RGBA颜色选择器,但具有0-1值(主要用于factorio modding)

    RGBA1是一个专为Factorio模组制作设计的颜色选择器工具,它采用了RGBA色彩模式,并且颜色的各个分量(红、绿、蓝、 alpha)都使用0-1之间的浮点数值来表示。在传统的RGB色彩模式中,颜色的每个分量通常用0到255的...

    4种input元素滑块UI设计效果

    CSS3是层叠样式表的最新版本,它引入了许多新的选择器、属性和值,如过渡(transition)、动画(animation)、阴影(box-shadow)和渐变(gradient),使得网页元素的外观和动态效果更为丰富和细腻。 四种不同的...

    -Sliders-With-P5.JS-Animation

    滑块是一种常见的用户界面元素,通常用于调节数值或开关状态。在Web开发中,HTML5的`&lt;input type="range"&gt;`元素可以创建一个基础的滑块,但要实现动画效果,我们需要借助P5.JS这样的库。滑块的基本结构包括滑块轨道...

Global site tag (gtag.js) - Google Analytics