javascript 变速加数功能实现代码- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript 变速加数功能实现代码

Javascript: 用Javascript 实现的Dual listbox; javascript中的数组应用的一点发现; 我与Javascript 随笔（二）; 关于IP验证的一个例子; JS中关于对内存的释放问题[待续]; 用JScript实现公历到农历的日期转换; 判断输入字符串为颜色类型的最优方法; 日期控件还是看看这个吧; javascript版的日期输入控件; 可输入的select改进版本,同一页面可有多个list,调用接口简化; 数字金额转换汉字金额; 关于四舍五入的问题,toFixed(); Select的OnChange()事件; 关于javascript树形结构的编写问题; 将人民币数字转换成大写形式; 用JavaScript实现动画效果; javascript: 改变和控制显示的图片大小（保持比例，同时可限制高宽）; 超强幻灯片播放脚本（VBS）; HTML页面如何象asp一样接受参数; 数字日期转化为汉字日期格式...

No. « ‹ 12 13 14 15 › »

技术文章搜索

关键字

Javascript 中的 javascript 变速加数功能实现代码

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 113 ::

收藏到网摘: n/a

支持IE,Firefox的javascript 日历控件 extjs 学习笔记（一）一些基础知识

试想一下你要在你的网站提供如下这样的功能：提供一个文本框用于收集用户数据，这个文本框只能接受整型的数值，不提供给用户手工输入，只提供两个按钮。用户单击其中一个按钮，可以让数字加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 全选提示:你可先修改部分代码,再按运行]

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

支持IE,Firefox的javascript 日历控件 extjs 学习笔记（一）一些基础知识

Javascript 中的 javascript 变速加数功能实现代码

评论 (0) All