软件开发培训班 >> 编程开发 >> JavaScript

javascript 变速加数功能实现代码

　　本文标签：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>

技术文章快速查找

让iframe框架网页在任何浏览器下自动伸缩

javascript oop开发滑动(slide)菜单控件

jquery 取字符串中数字的正则

jquery选择器、属性设置用法经验总结

分别用marquee和div+js实现首尾相连循环滚动效果，仅3行代码

js抓人游戏

一个可以显示阴历的JS代码

javascript 网站常用的iframe分割

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建