Count Общее количество завершенных CSS анимация

Question

На моей странице у меня есть небольшой простой колесо, как значок в верхней панели навигации, который вращается на 360 градусов, при наведении курсора мыши и обратно, когда мышь удаляется с помощью этого CSS коды:

.img-wheel{ 
border-radius: 50%; 
border:5px solid <?php echo $nav_text_color; ?>; 
-webkit-transition-duration: 0.8s; 
-moz-transition-duration: 0.8s; 
-o-transition-duration: 0.8s; 
transition-duration: 0.8s; 

-webkit-transition-property: -webkit-transform; 
-moz-transition-property: -moz-transform; 
-o-transition-property: -o-transform; 
transition-property: transform; 

overflow:hidden; 
} 
.img-wheel:hover { 
-webkit-transform:rotate(360deg); 
-moz-transform:rotate(360deg); 
-o-transform:rotate(360deg); 

Мне нужен счетчик рядом с ним, который показывает, сколько раз кто-то завершал всю анимацию (или, если проще, сколько раз кто-то зависал за рулем). Предпочтительный абсолютный итог, поэтому пользователь 1 зависает один раз, а счетчик добавляет +1, а пользователь 2 открывает сайт с помощью счетчика уже на 1, пользователь 2 наводит один раз, и он отображает 2. Пользователь 1 возвращается к и видит счетчик на 2.

Поскольку колесо находится в навигационной панели, счетчик также не должен сбрасываться при открытии другой страницы.

Я знаю, что для этого потребуются скрипты на стороне сервера, и мне любопытно, с чего начать. Моя идея состояла в том, чтобы добавить простой файл counter.txt с начальным значением 0. И некоторый скрипт должен отредактировать файл, добавив +1 каждый раз, когда анимация будет завершена. Но это также потребует перезагрузки counter.txt каждый раз, когда он редактируется, иначе он не будет отображаться в реальном времени пользователем.

У вас, ребята, блестящая идея?

Answer 1

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

Я бы предложил вам создать функцию js, которая изменит класс элемента колеса, чтобы изменить анимацию, и попросите его ajax post обратно на сервер с тем же ударом. Следующая проблема будет заключаться в хранении данных, поэтому вам, вероятно, понадобится какое-то хранилище общих данных, такое как база данных или сервер значений ключей, где вам нужно будет хранить идентификатор (что-то вроде) и вызвать счетчик те строки счетчика. Я советую против файла, так как вы, скорее всего, получите условия гонки в одном текстовом файле.