javascript 變速加數(shù)功能實(shí)現(xiàn)代碼

更新時(shí)間：2009年10月13日 22:01:12 作者：

試想一下你要在你的網(wǎng)站提供如下這樣的功能：提供一個(gè)文本框用于收集用戶數(shù)據(jù)，這個(gè)文本框只能接受整型的數(shù)值，不提供給用戶手工輸入，只提供兩個(gè)按鈕。

用戶單擊其中一個(gè)按鈕，可以讓數(shù)字加1，單擊另外一個(gè)按鈕則讓數(shù)字減1，如果按住按鈕不放，文本框的數(shù)值會越加越快或越減越快，即變速加數(shù)功能。
比如你打開電腦的“時(shí)間和日期屬性”窗口，你按下圖紅框標(biāo)識的上下按鈕調(diào)整時(shí)間，試著單擊與按著鼠標(biāo)不放，你會發(fā)現(xiàn)它的功能與我說的一樣（準(zhǔn)確說還是有區(qū)別的，它按下鼠標(biāo)不放加數(shù)速度是快了，但不會越來越快。我的例子是越加越快，這更適合數(shù)值比較大的數(shù)據(jù)提供場合）。

代碼很簡單，都加了注釋，就不知道實(shí)現(xiàn)的夠不夠科學(xué)，如果你有更好的建議不妨與我分享。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>變速加數(shù)功能實(shí)現(xiàn)</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="增加" />　按住按鈕不放，數(shù)值將會越加越快 <script type="text/javascript"> /** * 加數(shù)類 * @param {String} textBoxId 文本框ID */ function clsAddNum(textBoxId) { var step = 1; //默認(rèn)步長 var changeStepTimer = null; //改變速度計(jì)數(shù)器 var setValueTimer = null; //設(shè)置值計(jì)數(shù)器 /** * 改變速度私有方法 */ var changeStep = function() { //每隔1秒速度加5 changeStepTimer = setInterval(function(){step += 5}, 1000); } /** * 設(shè)置值私有方法 */ var setValue = function() { var textValue = parseInt(document.getElementById(textBoxId).value); document.getElementById(textBoxId).value = textValue + step; setValueTimer = setTimeout(setValue,200); //每隔200毫秒更新文本框數(shù)值一次 } /** * 按下鼠標(biāo)處理函數(shù) */ this.mouseDownHandle = function() { changeStep(); setValue(); } /** * 松開鼠標(biāo)處理函數(shù) */ this.mouseUpHandle = function() { //停止變速和改變文本框的值 clearInterval(changeStepTimer); clearTimeout(setValueTimer); step = 1; //恢復(fù)默認(rèn)速度 } } //實(shí)例化類 var addNum = new clsAddNum('textBox'); </script> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

作者：WebFlash
出處：http://webflash.cnblogs.com

您可能感興趣的文章: