Javascript-форум - Скрипт, увеличивающий значение input

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Скрипт, увеличивающий значение input (https://javascript.ru/forum/misc/42187-skript-uvelichivayushhijj-znachenie-input.html)

Скрипт, увеличивающий значение input

Подскажите пожалуйста, как сделать так, стобы при нажатии и удержании левой кнопки мыши на сером блоке UP, происходило в это время постепенное увеличение значение в блоке слева? Сейчас клик увеличивает значение на 1, но кликать 500 раз при необходимости не вариант, также не вариант увеличивать значение на число, отличное от единицы.

<style type="text/css">
.DATA {position:absolute;border:none;background:none;border:2px solid black;width: 47px;height: 21px;color:red;text-align:center;font-size:14px;}
.UP {position:absolute;background-color:gray;border:1px solid green;width:20px;height:20px;left: 77px;top: 21px;cursor:pointer;-moz-user-select: none;-khtml-user-select: none;}
</style></head>

<body>
<input maxlength="5" id="Attack" class="DATA" style="left: 13px; top: 20px;"  type="number" value="3000">
<div class="UP"  onclick="UP(Attack)">UP</div>

<script>
function UP(x){
x.value = Number(x.value) + 1}
</script>

</body></html>

фонарик,
onmousedown -> setTimeout -> onmouseup -> clearTimeout

Опять эти таймауты :( Я так и не разобрался в механизме скрипта как он работает с ними :( Что и как выполняет.

фонарик,
:cray:

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <style type="text/css">
.DATA {position:absolute;border:none;background:none;border:2px solid black;width: 55px;height: 21px;color:red;text-align:center;font-size:14px;}
.UP {position:absolute;background-color:gray;border:1px solid green;width:20px;height:20px;left: 77px;top: 21px;cursor:pointer;-moz-user-select: none;-khtml-user-select: none;}
</style>
</head>
<body>
<input maxlength="5" id="Attack" class="DATA" style="left: 13px; top: 20px;"  type="number" value="3000">
<div class="UP"  onmousedown="a='Attack';up()"  onmouseup="a = !1">UP</div>
<script>
var a = !1;
function up() {
    var b = document.getElementById(a);
    b.value = +b.value + 1;
    a && window.setTimeout(function () {
        up()
    }, 15)
};
</script>



</body>

</html>

рони, вы профессор :) Спасибо. Когда кто-то решил задачку решение кажется таким простым )))

Кое-как прикрутил максимальный порог значения, никак не догоню как сделать так, чтобы увеличение значения стартовало не сразу, а с задержкой, скажем, в 1 секунду. Например, если нужно увеличить значение на 1, то сделать это нереально. Можно изменить значение повторяемости в 10мс до, скажем, 100. Да, на 1 увеличить значение получится, но когда требуется на 1000 - уснешь пока повысишь (ручной ввод не рассматривается).

Хотелось бы реализовать задержку после зажатия лкм, чтобы число сразу не стремилось увеличиваться в ту же миллисекунду. И, получается, на увеличение значения в единицу - нужно вешать еще одну функцию по событию onclick ?

<style type="text/css">
.DATA {position:absolute;border:none;background:none;border:2px solid black;width: 55px;height: 21px;color:red;text-align:center;font-size:14px;}
.UP {position:absolute;background-color:gray;border:1px solid green;width:20px;height:20px;left: 77px;top: 21px;cursor:pointer;-moz-user-select: none;-khtml-user-select: none;}
</style>
</head>
<body>

<input maxlength="5" id="Attack" class="DATA" style="left: 13px; top: 20px;"  type="number" value="3000">
<div class="UP"  onmousedown="a='Attack';maxV=3100;up()"  onmouseup="a = !1">UP</div>

<script>
var a = !1;
var maxV;
function up() {
    var b = document.getElementById(a);
    if(b.value<maxV){b.value = +b.value + 1;
    setTimeout(function () {
        up()
    }, 10)
}};
</script>

</body>
</html>

Так и поверить в себя недолго :D

<head>
  <title>Untitled</title>
  <style type="text/css">
.DATA {position:absolute;border:none;background:none;border:2px solid black;width: 55px;height: 21px;color:red;text-align:center;font-size:14px;}
.UP {position:absolute;background-color:gray;border:1px solid green;width:20px;height:20px;left: 77px;top: 21px;cursor:pointer;-moz-user-select: none;-khtml-user-select: none;}
</style>
</head>
<body>
<input maxlength="5" id="Attack" class="DATA" style="left: 13px; top: 20px;"  type="number" value="3000">
<div class="UP"  onmousedown="a='Attack';maxV=3200;up0()"  onmouseup="a = !1">UP</div>
<script>
var a = !1;
var maxV ;

function up0(){
setTimeout("up()", 1000)};

function up() {
    var b = document.getElementById(a);
    if(b.value<maxV){b.value = +b.value + 1;
    setTimeout(function () {
        up()
    }, 10)
}};
</script>