Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.10.2013, 15:09
Кандидат Javascript-наук
Отправить личное сообщение для фонарик Посмотреть профиль Найти все сообщения от фонарик
 
Регистрация: 23.02.2013
Сообщений: 127

Скрипт, увеличивающий значение 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>
Ответить с цитированием
  #2 (permalink)  
Старый 16.10.2013, 15:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

фонарик,
onmousedown -> setTimeout -> onmouseup -> clearTimeout
Ответить с цитированием
  #3 (permalink)  
Старый 16.10.2013, 15:22
Кандидат Javascript-наук
Отправить личное сообщение для фонарик Посмотреть профиль Найти все сообщения от фонарик
 
Регистрация: 23.02.2013
Сообщений: 127

Опять эти таймауты Я так и не разобрался в механизме скрипта как он работает с ними Что и как выполняет.
Ответить с цитированием
  #4 (permalink)  
Старый 16.10.2013, 16:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

фонарик,

<!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>
Ответить с цитированием
  #5 (permalink)  
Старый 16.10.2013, 16:25
Кандидат Javascript-наук
Отправить личное сообщение для фонарик Посмотреть профиль Найти все сообщения от фонарик
 
Регистрация: 23.02.2013
Сообщений: 127

рони, вы профессор Спасибо. Когда кто-то решил задачку решение кажется таким простым )))
Ответить с цитированием
  #6 (permalink)  
Старый 16.10.2013, 17:26
Кандидат Javascript-наук
Отправить личное сообщение для фонарик Посмотреть профиль Найти все сообщения от фонарик
 
Регистрация: 23.02.2013
Сообщений: 127

Кое-как прикрутил максимальный порог значения, никак не догоню как сделать так, чтобы увеличение значения стартовало не сразу, а с задержкой, скажем, в 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>
Ответить с цитированием
  #7 (permalink)  
Старый 16.10.2013, 20:00
Кандидат Javascript-наук
Отправить личное сообщение для фонарик Посмотреть профиль Найти все сообщения от фонарик
 
Регистрация: 23.02.2013
Сообщений: 127

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

<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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
checkbox check если значение input djonA Общие вопросы Javascript 8 14.01.2014 06:44
Выводить значение раньше переменных Гробовщик Общие вопросы Javascript 11 10.09.2013 08:42
Изменить значение name= в input type=text hub00 Общие вопросы Javascript 1 20.03.2012 14:57
Копировать значение input с одной странице на другую lamer Элементы интерфейса 0 06.03.2012 04:03
Копирование из одного input в другой input bar-boss Общие вопросы Javascript 7 08.04.2008 19:10