Счетчик кликов по кнопке (с сохранением количества)

@Freid1 · Регистрация: 24.03.2014

Студворк — интернет-сервис помощи студентам

Нужен счетчик кликов по кнопке php с сохранение количества.
Есть вот такой код подскажите что надо добавить или если есть скиньте ссылку на готовый вариант.

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
echo"<div align='center'>
<a href='javascript:click();'>Take: <span>0</span></a>
</div>";
?>
<script type='text/javascript'>
 
function clickConstructor() {
    var count = 0;
    return function() {
        document.querySelector('span').innerHTML = ++count;
    }
}
 
window.click = clickConstructor();
</script>

@prudkiy · 09.09.2014, 00:29

к вашему примеру есть много вопросов

href='javascript:click();'

- что это такое?
счетчик, как видно, вы питаетесь реализовать через JS, только как то там что то тоже нихт неясно

Добавлено через 4 минуты
вашу задачу нужно реализовать примерно по такой простой схеме -
клик по кнопке -> вызов скрипта php который должен записать результат своей работы, в базу или в файл это не так уж и важно, если уже есть база то в базу, если с ней работать вы не планируете то пусть это будет файл

Добавлено через 1 час 45 минут
Вот быстренько такое написал -
В директории создаем файл index.php и count.txt
В index.php вот такой код php -

PHP
1
2
3
4
5
6
7
8
<?php
if(isset($_POST['countBut'])){ // если была нажата кнопка
    $count = file_get_contents('count.txt'); // читаем файл count.txt
    $count++; // увеличиваем на еденицу
    file_put_contents('count.txt',$count); // записываем новое значение в count.txt
}
else $count = file_get_contents('count.txt'); // если не нажата то просто читаем count.txt
?>

и код html -

HTML5
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE HTML>
<html>
<head>
    <title>counter</title>
</head>
<body>
<form action="index.php" method="post">
<input type="submit" name="countBut" value="По этой кнопке кликнули <?=$count?> раз" />
</form>
</body>
</html>

В count.txt записываем 0. Можно конечно его не создавать, функция записи сама его создаст если его не будет, но во благо сокращения кода на проверки существования итд так проще, тем более мы знаем что туда записать для старта.
Думаю под свои нужды уже его подстроите. Если что не ясно - пишите

@another_pers · 09.09.2014, 10:25

Сделай через Ajax:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?php
echo"<div align='center'>
<a href='javascript:click();'>Take: <span>0</span></a>
</div>";
?>
<script type='text/javascript'>
var xmlhttp;
if (window.XMLHttpRequest) 
  // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
else
  // code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 
 
function clickConstructor() {
    var count = 0;
    return function() {
        document.querySelector('span').innerHTML = ++count;
 
        /*Отправка через Аджакс*/
        xmlhttp.open("GET","counter.php?count="+count,true);
        xmlhttp.send();
        
        //Ответ сервера о статусе счетчика
        xmlhttp.onreadystatechange = function () {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
            console.log ("статус отправки "+xmlhttp.responseText);
        }
    }
}
 
window.click = clickConstructor();
</script>

Количество кликов передается в файл "counter.php". А этот файл будет сохранить его. Как сохранить решай сам.

@Kerze · 14.12.2014, 22:52

prudkiy, Подскажите пожалуйста, как сделать подсчет кликов не по кнопке, а по картинке?

@prudkiy · 16.12.2014, 00:11

Ну можно конечно по извращаться и написать вместо input - button. т.е. - <button type="submit"><img src="" /></button> Но в таком случаи я бы рекомендовал так же AJAX. Вы с jQuery работаете?

@Kerze · 17.12.2014, 14:03

Сообщение от prudkiy

Ну можно конечно по извращаться и написать вместо input - button. т.е. - <button type="submit"><img src="" /></button> Но в таком случаи я бы рекомендовал так же AJAX. Вы с jQuery работаете?

Да, работаю с jQuery. Сделал так:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?php
if(!file_exists('counter.txt')){
file_put_contents('counter.txt', '0');
}
if($_GET['click'] == 'yes'){
file_put_contents('counter.txt', ((int) file_get_contents('counter.txt')) + 1);
header('Location: ' . $_SERVER['SCRIPT_NAME']);
header ('Location: index.html');
die;
}
?>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>counter example</title>
</head>
<body>
<h1><?php echo file_get_contents('counter.txt'); ?></h1>
<a href="?click=yes"><img src="https://www.cyberforum.ru/images/buttonHelp.png" width="200" height="179" border="0"/></a>
</body>
</html>

Но, в виджите ВордПресс работать не хочет. Видимо, все надо написать в пхп

@prudkiy · 18.12.2014, 01:06

про то как работать с ajax через jquery я рассказал здесь вроде все ясно - Запуск файла по кажатию кнопки
Обработчик думаю совсем простой - пришли туда - проверили что пришли от того что кликнули на картинку - взяли предыдущее значение - увеличили на единицу. Нужно будет только определиться куда писать, в базу или файл. Я, т.к. в 90% случаев работаю с базой mysql, предпочел бы ее но если ради только этого то конечно лучше писать в файл

@Дедуля · 10.08.2016, 12:54

prudkiy, Мне очень понравился ваш код счётчика. Скажите, пожалуйста, а как сделать так, чтобы кнопка для кликов была бы ещё и ссылкой на другую страницу? Я пытаюсь написать, но ничего не получается. пишу вот так:

PHP/HTML
1
2
3
4
<form action="index.php" method="post">
<input   onclick="HomeButton()" type="submit" name="countBut" value="По этой кнопке кликнули <?=$count?> раз" />
<SCRIPT>function HomeButton(){location.href="http:// адрес страницы";}</SCRIPT>
</form>

Я так понимаю, что ссылка не открывается из-за того, что здесь type="submit", а не type="button", как должно быть.
Как же тогда сделать эту кнопку ссылкой?

@Alei CD · 21.11.2019, 18:39

prudkiy, все отлично работает, но на кнопке высвечивается непонятная надпись: По этой кнопке кликнули <?=$count?> раз, вероятно вы хотели добавить переменную в текст. И ещё, после нажатия на кнопку переходим на страницу index.php, а не остаёмся на главной странице, можете поправить и тогда отлично!

@Alei CD · 30.11.2019, 19:16

Новые блоги и статьи Все статьи Все блоги /
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Рецензия / Мнение/ Перевод https:/ / **********/ gallery/ thinkpad-x220-tablet-porn-gzoEAjs . . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .

@Kerze 0 / 0 / 0 Регистрация: 14.12.2014 Сообщений: 2
	14.12.2014, 22:52
	prudkiy, Подскажите пожалуйста, как сделать подсчет кликов не по кнопке, а по картинке? 0

@prudkiy 181 / 149 / 55 Регистрация: 21.07.2013 Сообщений: 958
	16.12.2014, 00:11
	Ну можно конечно по извращаться и написать вместо input - button. т.е. - <button type="submit"><img src="" /></button> Но в таком случаи я бы рекомендовал так же AJAX. Вы с jQuery работаете? 0

@prudkiy 181 / 149 / 55 Регистрация: 21.07.2013 Сообщений: 958
	18.12.2014, 01:06
	про то как работать с ajax через jquery я рассказал здесь вроде все ясно - Запуск файла по кажатию кнопки Обработчик думаю совсем простой - пришли туда - проверили что пришли от того что кликнули на картинку - взяли предыдущее значение - увеличили на единицу. Нужно будет только определиться куда писать, в базу или файл. Я, т.к. в 90% случаев работаю с базой mysql, предпочел бы ее но если ради только этого то конечно лучше писать в файл 0

@Alei CD 0 / 0 / 0 Регистрация: 21.11.2019 Сообщений: 8
	21.11.2019, 18:39
	prudkiy, все отлично работает, но на кнопке высвечивается непонятная надпись: По этой кнопке кликнули <?=$count?> раз, вероятно вы хотели добавить переменную в текст. И ещё, после нажатия на кнопку переходим на страницу index.php, а не остаёмся на главной странице, можете поправить и тогда отлично! 0

@Alei CD 0 / 0 / 0 Регистрация: 21.11.2019 Сообщений: 8
	30.11.2019, 19:16
	0