javascript 变速加数功能实现代码

更新时间：2009年10月13日 22:01:12 作者：

试想一下你要在你的网站提供如下这样的功能：提供一个文本框用于收集用户数据，这个文本框只能接受整型的数值，不提供给用户手工输入，只提供两个按钮。

用户单击其中一个按钮，可以让数字加1，单击另外一个按钮则让数字减1，如果按住按钮不放，文本框的数值会越加越快或越减越快，即变速加数功能。
比如你打开电脑的“时间和日期属性”窗口，你按下图红框标识的上下按钮调整时间，试着单击与按着鼠标不放，你会发现它的功能与我说的一样（准确说还是有区别的，它按下鼠标不放加数速度是快了，但不会越来越快。我的例子是越加越快，这更适合数值比较大的数据提供场合）。

代码很简单，都加了注释，就不知道实现的够不够科学，如果你有更好的建议不妨与我分享。HTML与JavaScript代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>变速加数功能实现</title> </head> <body> <input name="textBox" type="text" id="textBox" value="1" /> <input name="add" type="button" onmousedown="addNum.mouseDownHandle()" onmouseup="addNum.mouseUpHandle()" id="add" value="增加" />　按住按钮不放，数值将会越加越快 <script type="text/javascript"> /** * 加数类 * @param {String} textBoxId 文本框ID */ function clsAddNum(textBoxId) { var step = 1; //默认步长 var changeStepTimer = null; //改变速度计数器 var setValueTimer = null; //设置值计数器 /** * 改变速度私有方法 */ var changeStep = function() { //每隔1秒速度加5 changeStepTimer = setInterval(function(){step += 5}, 1000); } /** * 设置值私有方法 */ var setValue = function() { var textValue = parseInt(document.getElementById(textBoxId).value); document.getElementById(textBoxId).value = textValue + step; setValueTimer = setTimeout(setValue,200); //每隔200毫秒更新文本框数值一次 } /** * 按下鼠标处理函数 */ this.mouseDownHandle = function() { changeStep(); setValue(); } /** * 松开鼠标处理函数 */ this.mouseUpHandle = function() { //停止变速和改变文本框的值 clearInterval(changeStepTimer); clearTimeout(setValueTimer); step = 1; //恢复默认速度 } } //实例化类 var addNum = new clsAddNum('textBox'); </script> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

作者：WebFlash
出处：http://webflash.cnblogs.com

您可能感兴趣的文章:

JS去掉字符串末尾的标点符号及删除最后一个字符的方法
这篇文章主要介绍了JS去掉字符串末尾的标点符号及删除最后一个字符的方法,需要的朋友可以参考下
2017-10-10
Js 回车换行处理的办法及replace方法应用
当我们在文本框里输入文字敲下回车后，希望在提交后网页也显示是换行的效果,可往往并不能如愿以偿啊，实在是愤怒啊自己写了一个回车换行处理的函数，感兴趣的朋友可以了解下啊，希望本文对你有所帮助
2013-01-01
微信小程序常用表单组件的使用详解
本文主要为大家介绍了微信小程序中常用的几个表单组件的使用方法，例如：button、CheckBox、input、form等，感兴趣的可以了解一下
2022-03-03
JavaScript–Apple设备检测示例代码
JavaScript–Apple设备检测示例代码。需要的朋友可以过来参考下，希望对大家有所帮助
2013-11-11
微信小程序Vant组件库的安装与使用教程
之前推荐过的移动端web组件库 Vant是Vue.js版本的,其对内承载了有赞所有核心业务,对外有十多万开发者在使用,一直是业界主流的移动端组件库之一,下面这篇文章主要给大家介绍了关于微信小程序Vant组件库的安装与使用的相关资料,需要的朋友可以参考下
2022-09-09
JavaScript实现鼠标经过表格某行时此行变色
这篇文章主要为大家详细介绍了JavaScript实现鼠标经过表格某行时此行变色，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11
JavaScript实现对JSON对象数组数据进行分页处理
这篇文章主要介绍了使用JavaScript实现对JSON对象数组数据进行分页处理,文中有详细的代码示例供大家参考,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
2024-10-10
实现无刷新联动例子汇总
最近在用asp.net做项目的时候，遇到需要实现无刷新联动的需求，度娘了一下，这里汇总一下几个比较实用的例子，有需要的小伙伴可以参考下。
2015-05-05
javascript常用代码段搜集
这篇文章主要记录了本人搜集的几段javascript常用代码段，都是平时项目中需要用到的,需要的朋友可以参考下
2014-12-12
JS实现打砖块游戏
这篇文章主要为大家详细介绍了JS实现打砖块游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-02-02

javascript 变速加数功能实现代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具