Как создать счетчик кликов (соответствует jQuery 2.0.2/2.0.1)

Я пытаюсь сделать веб-страницу по сбору средств (для благотворительности), и для показа я решил пойти с кроликом, прыгающим вокруг света.

То, что я получил до сих пор, это не зацикленный gif, который воспроизводится по клику, и кликать по нему можно только один раз каждые столько секунд. Вы можете проверить веб-страницу здесь.

Это грубая версия того, как будет выглядеть готовый продукт, но я хочу добавить счетчик кликов на картинку, чтобы каждый раз, когда кролик прыгает, +1 добавляется к счетчику, а затем я сделаю клики универсальными (но мы возьмем это в другой раз). это ссылка на JSFiddle, содержащую коды, которые я использовал до сих пор (не считая некоторых незначительных изменений). Как добавить счетчик кликов в этот скрипт? Не стесняйтесь использовать ссылку JSFiddle, и проверьте страницу!

Вот полный скрипт для страницы в ее текущем состоянии:

<html>
<head>
<title>Around The World</title>

<script src="http://code.jquery.com/jquery-2.0.0.js"></script>

<style type="text/css">
    body {margin:0; }
</style>

<script>
$(function(){
    var image = new Image();
    image.in_action = false;  // flag to determine current state. Initialize to ready to     animate.
    image.duration = 750;  // This is rough, if you are creating the gif you can peg this     to the proper duration
    image.src ='transparent.gif';
    $('#img').click(function(){
        if (!image.in_action) {
           image.in_action = true;  // Set the image as in progress
           $(this).attr('src',image.src);
            window.setTimeout(function() {
                image.in_action = false;  // After image.duration amount of miliseconds,     set as finished
            }, image.duration);
        }
    });
});
</script>


<style>
img {
    position: relative;
    top: 100px;
    width:150px;
    height:206px;
}
</style>

</head>
<body bgcolor="00FFFF">

<center>
<img id = "img"

src = "still.png">
<center>

</body>
</html>

Спасибо всем заранее!

Источник

1 ответ

Не уверен, правильно ли я понял, но это может быть простая глобальная переменная:

...
<script>

var counter = 0;

$(function(){
    var image = new Image();
...
   if (!image.in_action) {
       counter++;               // Increase counter by 1
       $('#click-counter').text('Number of clicks: '+counter); // maybe show somewhere
       image.in_action = true;  // Set the image as in progress
...
Источник
Другие вопросы по тегам