按住按钮不放input框值持续增加,求大神看看哪里错了,也感谢各位大神的宝贵意见,单个可以,为什么传入id就只能单增单减?

goldenMoon 发布于 2016/07/04 22:48
阅读 416
收藏 1
html代码:
<!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=utf-8">
    <title>点击按钮文本框数值增加。</title>
</head>
<body>
    <table class="t1" border="1" >
        <tr>
             <td class="s1">测试物品</td>
             <td class="s1">测量值</td>
             <td class="s1">误差</td>
         </tr>
        <tr>
             <td class="s1">高度</td>
             <td>
                <input class="ss" type="text" name="qwq" id="qwq" value="0">
                <input class="up" type="button" value="▲" id="up1"  />
                <input class="down" id="down1" type="button" value="▼" />
             </td>
            <td>
                <input class="ss" type="text" name="qwqf" id="qwqf" value="0">
                <input class="up" type="button" value="▲" id="up2"  />
                <input class="down" id="down2" type="button"  value="▼" />
            </td>
        </tr>
        <tr>
            <td class="s1">弧度</td>
            <td>
                <input class="ss" type="text" name="hwq" id="hwq" value="+0°00′">
                <input class="up" type="button" value="▲" id="up3"  />
                <input class="down" id="down3" type="button"  value="▼" />
            </td>
            <td>
                <input class="ss" type="text" name="hwqf" id="hwqf" value="±0°00′">
                <input class="up" type="button" value="▲" id="up4"  />
                <input class="down" id="down4" type="button"  value="▼" />
            </td>
        </tr>
        <tr>
            <td class="s1">长度</td>
            <td>
                 <input class="ss" type="text" name="hq" id="hq" value="0">
                <input class="up" type="button" value="▲" id="up5"  />
                 <input class="down" id="down5" type="button"  value="▼" />
            </td>
             <td>
                 <input class="ss" type="text" name="hqf" id="hqf" value="0">
                 <input class="up" type="button" value="▲" id="up6"  />
                <input class="down" id="down6" type="button"  value="▼" />
            </td>
        </tr>
</body>
</html>

js代码:
var step = 1; //默认步长
var changeStepTimer = null; //改变速度计时器
var setValueTimer = null; //设置值计时器
var idValue=null;
(function($){
    var trList=$('.t1').find("tr");
    //alert(trList.length);
    for(var i=1;i<trList.length;i++){
        var tdArr=trList.eq(i).children();
        for(var j=1;j<tdArr.length;j++){
        var inputArr=tdArr.eq(j).children();
        //alert(inputArr.length);
        idValue="#"+inputArr.eq(0).attr('name');
        //alert(idValue);        
        inputArr.eq(1).on('mousedown',{id:idValue},function(event){
                    changeStep();
                    setValue(event.data.id); 
                    //alert(event.data.id);    
        });
        inputArr.eq(1).on('mouseup',function(){
        clearInterval(changeStepTimer);
           clearTimeout(setValueTimer);
           step = 1; //恢复默认速度,每次增加1
        }) ;
            inputArr.eq(2).on('mousedown',{id:idValue},function(event){  
                  
                    changeStep();
                    setValue2(event.data.id); 
                  
        });
        inputArr.eq(2).on('mouseup',function(){
        clearInterval(changeStepTimer);
           clearTimeout(setValueTimer);
           step = 1; //恢复默认速度,每次增加1
        }); 
           
        }  
    }
var setValue=function(idv){
    
   var textValue=parseInt($(idv).val())+step;
   $(idv).val(textValue);
   setValueTimer = setTimeout(setValue, 200); //每隔100毫秒更数文本框数值一次
};
var setValue2=function(idv){
        //alert(idv);
   var textValue = parseInt($(idv).val()) - step;
   //alert(textValue);
   $(idv).val(textValue);
   setValueTimer = setTimeout(setValue2, 200); //每隔100毫秒更数文本框数值一次
};
    function changeStep() {
//每隔1秒速度加5
changeStepTimer = setInterval(function() {
step += 5;
}, 1000);
}
}(jQuery))


这样只能单次增加或减少
如果我不传id,方法里都改为具体的某一input框id,按住上下键不放持续增减,比如
var setValue=function(idv){
    
   var textValue=parseInt($('#qwq').val())+step;
   $('#qwq').val(textValue);
   setValueTimer = setTimeout(setValue, 200); //每隔100毫秒更数文本框数值一次
};

问题是我有很多input框,不可能一个一个来,我一直不知道什么问题,求路过的好心大神指导下,谢谢!!!!



加载中
0
hyjiacan
hyjiacan

那我再给你个例子。

JS部分用这段。。

var step = 1;
var max = 100;
var min = 0;
var timerId = -1;
var interval = 200;
var acceleration = 1;
var mouseDownTime = 0;

function increment(input) {
	var newval = parseInt(input.val()) + step;
	if (newval > max) {
		newval = max;
		input.val(newval);
		return;
	}
	input.val(newval);

	setTimer(increment, input);
}

function decrement(input) {
	var newval = parseInt(input.val()) - step;
	if (newval < min) {
		newval = min;
		input.val(newval);
		return;
	}

	input.val(newval);

	setTimer(decrement, input);
}

function setTimer(fn, input) {
	timerId = setTimeout(function() {
		mouseDownTime += interval;
		if (mouseDownTime >= 1000) {
			step += acceleration;
		}
		fn(input);
	}, interval);
}

$('.t1 tr td input[type=button]').mousedown(function() {
	clearTimeout(timerId);
	mouseDownTime = 0;
	step = 1;
	
	var button = $(this);
	var input = button.prevAll('.ss:first');

	if (button.hasClass('up')) {
		increment(input);
	} else if (button.hasClass('down')) {
		decrement(input);
	}

}).mouseup(function() {
	clearTimeout(timerId);
});


要确保页面的结构是可控的,不要到处都使用ID。

注释我就不写了,自己理解吧
goldenMoon
goldenMoon
非常感谢,自己摸了2天,蛋疼,刚用时由于引用js文件放错位置没有显示,谢谢!
0
wow863597
wow863597
我理解的是你的按键容易启动多条线程,但是只关闭了一条,造成持续增加过多,设置个变量true或者false控制只启动一个线程。
goldenMoon
goldenMoon
我也快晕了,遍历的话延迟会变成多线程吗,还真不知道
0
负心杏

一个操作组的input,使用有规律的属性标识。

如:用于输入的input的 id="size_inp_show",向上的input:id="size_inp_up" ,向下的input:id="size_inp_down"

size标识 功能作用,最后的:show,up,down  标识在当前操作组里面的作用。

------或者干脆用相对位置,使用jquery的prev() ,next() 来获取操作对应的其他input


JQuery事件回调里面有个 this 指向事件源dom。

$(dom).on("mousedown", function(){

        this;//就是dom

        var $this = $(this);

        .......根据上面两种方法中的一种获取对应需要操作的input

        //然后就是你的定时器加减

});

goldenMoon
goldenMoon
谢谢指点,你的意思是将input框每一组展示和上下键放一起,size值变动就代表着是哪一组input框,这样问题就是确定哪一组被点击了,当时想过不知道做没做,后来因为要将建嵌入到input框,就统一设置的class,弄得头都大了,换来换去没出结果,最后突然想到遍历,找到每组td下对应的3个input,结果代码变复杂了,按住不放持续增减效果没有,而我看不出来为什么。
0
mark35
mark35

try

<input class="ss" type="number" name="hqf" id="hqf" min=0 max=1000 step=1 value="0">



goldenMoon
goldenMoon
@mark35 谢谢,已解决
mark35
mark35
回复 @IT路漫漫 : 可以考虑使用小数方式表示的弧度值?
goldenMoon
goldenMoon
谢谢,这个还真忘记了,但是貌似不能增加弧度,其实我值全是弧度,+0°00′ ±0°00′ ,我要进行判断分度进阶转换,还有正负问题,特别是范围值 ±0°00′。你这种input step我看看能不能进行转换
mark35
mark35
回复 @IT路漫漫 : 支持html5的浏览器就可以自动递增递减了
goldenMoon
goldenMoon
这个,设置最大最小值,和step后?
0
goldenMoon
goldenMoon
在网上找的一个例子:

<!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">
<meta name="keywords" content="站长,网页特效,网页特效代码,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网,站长必备js特效及广告代码。大量高质量js特效,提供高质量广告代码下载,尽在站长特效网" />
<title>网页特效 点击按钮文本框数值增加 站长特效网欢迎您。</title>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net,站长js特效。<hr>
<!--欢迎来到站长特效网,我们网站收集大量高质量js特效,提供许多广告代码下载,网址:www.zzjs.net,zzjs@msn.com,用.net打造靓站-->
<input type="text" name="textBox" id="textBox" value="1" readonly="true">
<input type="button" name="add" id="add" value="增加" onmousedown="addNum.mouseDownHandle()" onmouseup="addNum.mouseUpHandle()">
点击按钮一次加1,按住按钮不放,数值将会越加越快
<script type="text/javascript">
/**
 * 加数类
 * @param {String} textBoxId 文本框ID
 */
function clsAddNum(textBoxId)
{
    var step = 1; //默认步长
    var changeStepTimer = null; //改变速度计时器
 var setValueTimer = null; //设置值计时器
//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
 /**
  * 改变速度私有方法
  */
    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; //恢复默认速度
    }
}//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
//实例化类
var addNum = new clsAddNum('textBox');
</script>
</body>
</html>
这是可以运行并且实现效果的,代码里不要随便弹出信息,否则点击一次按钮,即使放开也会持续增加,我自己的弄到现在不管将方法放在input框,还是放到js文件,因为我的组数很多,所以考虑传入id,结果怎么搞就是没有连续变化

返回顶部
顶部