Как я могу сделать универсальный счетчик кликов?

Question

У меня есть gif на моей веб-странице, который зацикливается только один раз, и я установил его так, чтобы он перезагружался каждый раз, когда я щелкаю по нему (используя эффект onclick). Я дал этому эффекту onclick время восстановления 800 мс, то есть продолжительность GIF, так что вы не можете перезагрузить GIF, пока он не закончится. Я также добавил эффект клик-клинтера к этому гифу, чтобы он показывал +1 на счетчике каждый раз, когда его нажимали. В целях точности и качества, я также дал эффекту clickcounter время восстановления 800 мс, что означает, что вы не можете добавлять больше (+1) каждые 0,8 секунды. Я использовал следующий скрипт:

Javascript

<script>
$(function(){
    var update_count = function () {
        $('#count-block').html("<h3><b>The rabbit has jumped " + image.click_count + " meters.</b></h3>");
    }
    var image = new Image();
    image.in_action = false;
    image.duration = 800;
    image.click_count = 0;
    update_count();
    image.src ='transparent.gif';
    $('#img').click(function(){
        if (!image.in_action) {
           image.in_action = true;
           image.click_count += 1;
           update_count();
           $(this).attr('src',image.src);
            window.setTimeout(function() {
                image.in_action = false;
            }, image.duration);

        }
    });
});
</script>

Это прекрасно работает, как вы можете видеть из этой ссылки на мою веб-страницу, но я хотел бы сделать эффект клик-контура универсальным. Под этим я подразумеваю то, что я хотел бы, чтобы клики были сохранены в папке (возможно, в моей основной папке в моей базе данных), чтобы каждый клик учитывался друг за другом, что означает, что клики будут накапливаться. Например, если я нажимаю кнопку 10 раз, а кто-то другой (на совершенно другом компьютере / сети / области) нажимает кнопку 12 раз, общее количество нажатий будет 22 и т. Д.

Вы можете найти ссылку JSFiddle на мою веб-страницу здесь

Я довольно плохо знаком со сценариями, HTML и т. Д., Поэтому понадобятся грубые объяснения. Я еще не опробовал таблицы стилей или что-либо, связанное со сторонним элементом / папкой и т. Д. (Что, я считаю, требуется для этого проекта), так что я бы оценил, если бы вы могли обсудить этот процесс.

Я пойду дальше в деталях и разработаю мои предпочтения, если это необходимо! Не стесняйтесь использовать ссылку JSFiddle и проверить веб-страницу в ее текущем состоянии

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

(кстати, для чего это стоит, моя база данных работает на PHP)

Answer 1

Вот мое предложение, и я не проверял его, поэтому я не уверен на 100%, что это работает, но создаю скрытое поле ввода с помощью jQuery(я предполагаю, что это библиотека, которую вы используете, основанная на первой функции).

$("#img").append("<input type='hidden' name='counter' id='counter' value='" +image.click_count +"' />

Затем в PHP опубликуйте значение поля ввода. Затем вставьте это значение в вашу базу данных, например.

PHP

    $counter = $_POST["counter"];
    **INSERTING THE CLICK COUNTS**
    mysqli_query($dbconnection, "INSERT INTO 'clicks'(`clicks`) VALUES('" .$counter ."');

$query = mysqli_query($dbconnection, "SELECT SUM(clicks) AS 'Clicks' FROM 'clicks');
while($row = mysqli_fetch_assoc($query){
    $clickNumber = "{$row['clicks']}";
}

Конечно, это всего лишь "черновик", и вам придется изменить его в соответствии с вашими потребностями, но он должен помочь вам начать. Вам также придется заменить имена таблиц и полей на то, что находится в вашей базе данных, но это общая идея.