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

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

Javascript: JavaScript 渐变效果页面图片控制; JavaScript blog式日历控件新算法; Javascript 读后台cookie代码; js 弹簧效果代码; JavaScript滑移效果代码; javascript字符串拆分成单个字符相加和不超过10，求最终值; Prototype中dom对象方法汇总; Jquery与Prototype混合用法对比; javascript下IE与FF兼容函数收集; 突破winxp sp2/win2003 sp2超强弹窗代码; js点击出现场层层外点击层消失的代码; Javascript模拟scroll滚动效果脚本; javascript各种复制代码收集; javascript的trim,ltrim,rtrim自定义函数; 仿3721首页模块拖曳移动效果js代码[可拖曳层移动层]; Javascript拖拽系列文章1之offsetParent属性; Discuz! 6.1_jQuery兼容问题; js日历控件（可精确到分钟）; javascript DOM实用学习资料; javascript实现的树型下拉框改进版

No. « ‹ 109 110 111 112 › »

技术文章搜索

关键字

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

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

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