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

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

Javascript: 网页中的图片的处理方法与代码; 用javascript实现jquery的document.ready功能的实现代码; Exitjs获取DataView中图片文件名; javascript 加入收藏、设为首页(IE,firefox兼容脚本之家版); isArray()函数(JavaScript中对象类型判断的几种方法); Javascript 二维数组; js setattribute批量设置css样式; Javascript 复制数组实现代码; extJs 文本框后面加上说明文字+下拉列表选中值后触发事件; JavaScript 闭包在封装函数时的简单分析; javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码; JavaScript 字符串操作的几种常见方法; javascript &&和||运算法的另类使用技巧; [原创]javascript代码在ie8里报错 document.getElementById(...) 为空或不是对象的解决方法; js鼠标移动在title中显示图片的效果代码; JavaScript Alert通用美化类; javascript 新闻列表排序简单封装; Javascript 构造函数,公有,私有特权和静态成员定义方法; javascript 设置某DIV区域内的checkbox复选框; document.body.scrollTop 值总为0的解决方法比较常见的标准问题

No. « ‹ 242 243 244 245 › »

技术文章搜索

关键字

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

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

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