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

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

Javascript: js 判断 enter 事件; 谷歌浏览器 insertCell与appendChild的区别; 从JavaScript 到 JQuery (1)学习小结; JavaScript实现动态增加文件域表单; JavaScript DOM 添加事件; Javascript 跨域访问解决方案; 检测是否已安装 .NET Framework 3.5的js脚本; JavaScript 获得选中文本内容的方法; Javascript 获取链接(url)参数的方法; javascript Ext JS 状态默认存储时间; 动态为事件添加js代码示例; JSON扫盲帖 JSON.as类教程; JavaScript 全面解析各种浏览器网页中的JS 执行顺序; js实现权限树的更新权限时的全选全消功能; javascript Table 中2个列（TD）的交换实现代码; js表数据排序 sort table data; javascript css在IE和Firefox中区别分析; JAVASCRIPT IE 与 FF中兼容问题小结; 判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明; csdn 批量接受好友邀请

No. « ‹ 126 127 128 129 › »

技术文章搜索

关键字

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

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

收藏到网摘: 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