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

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

Javascript: javascript 新浪背投广告实现代码; javascript 选择文件夹对话框(web); JS 自动完成 AutoComplete(Ajax 查询); javascript scrollLeft,scrollWidth,clientWidth,offsetWidth 完全详解; jQuery 插件开发其实很简单; 最简单的jQuery程序入门者学习; javascript 读取xml,写入xml 实现代码; JQuery 实现的页面滚动时浮动窗口控件; javascript 动态加载 css 方法总结; javascript 表格左右收缩; jqurey 学习笔记传智博客佟老师附详细注释; javascript dom 操作详解 js加强; JS 动态添加列表框项效果代码; Javascript 事件流和事件绑定; Google Map Api和GOOGLE Search Api整合实现代码; 9个javascript语法高亮插件推荐; Prototype String对象学习; javascript ImgBox透明遮罩层背景图片展示; javascript FAQ函数(提问+回复); jQuery TextBox自动完成条

No. « ‹ 222 223 224 225 › »

技术文章搜索

关键字

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

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

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