2016-04-30 2 views
1

Я пытаюсь создать простую игру типа clicker для куки-файлов (счетчик кликов) с помощью jQuery. Я хочу иметь кнопку, которая увеличивает ценность кликов на каждую секунду. Как я могу это сделать и есть ли ошибки в моем кодировании? Я очень новичок в этом.jQuery Click Counter

Вот мой код:

$(function() { 
 
    $('#target').click(function() { 
 
    $('#output').html(function(i, val) { 
 
     return val * 1 + 1; 
 
    }); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"> 
 
    <button id="target" type="button">Click</button> 
 
    <div id="output">0</div> 
 
</div>

+0

Чтобы избежать необходимости разобрать число с каждым обновлением, вы можете захотеть сделать переменную 'count', который можно манипулировать и отображения с JS. – 4castle

ответ

0

Если я правильно понять вас, бит вы боретесь с возрастает значение каждого клика, один раз в секунду. Вы хотите использовать setInterval

jsfiddle Demo

var score = parseInt($('#output').html()); 
 
$(function() { 
 
    setInterval(function() { 
 
    score += 1; 
 
    $('#output').html(score); 
 
    }, 1000); 
 

 
    $('#target').click(function() { 
 
    score += 1; 
 
    $('#output').html(score); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"> 
 
    <button id="target" type="button">Target</button> 
 
    <br/> 
 
    <div id="output">0</div> 
 
</div>

+0

Я только что попробовал это, но значение не затухает каждую секунду? Извините, я огромный noob при кодировании в целом. –

+0

извините - он 1:30 утра - немного устал. он работает сейчас – Erresen

+0

Привет, это просто случайное увеличение стоимости сейчас? То, что я пытаюсь сделать, это сделать кнопку, которая при нажатии увеличивает значение каждую секунду. И когда я нажимаю на основную кнопку, это увеличивает значение на единицу. –

1

кнопка, которая автоматически «щелкает» кнопка будет требовать, чтобы вы добавить setInterval, которая обновляет число постоянно, а другую кнопку который изменяет количество кликов, добавляемых с каждым обновлением.

Вот как я это сделаю. Я закодировал его таким образом, чтобы вы могли легко добавить другие кнопки, которые изменяют скорость клика другими способами. Обратите внимание на разницу между приращением count и увеличением countRate. JSFiddle

$(function() { 
 
    var count = 0, countRate = 0, output = $('#output'); 
 

 
    setInterval(function(){ output.html(count) }, 1); // update continually 
 
    setInterval(function(){ count += countRate }, 1000); // update once-per-second 
 

 
    $('#click').click(function(){ count += 1 }); 
 
    $('#autoClick').click(function(){ countRate += 1 }); 
 
});
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> 
 

 
<button id="click">Click</button> 
 
<button id="autoClick">Auto Click</button> 
 
<div id="output">0</div>

+0

Я обновил свой алгоритм несколько раз. Сейчас это намного лучше. – 4castle