Question

在我的网页上，我在顶部导航栏中有一个简单的小轮状图标，当通过此CSS代码删除鼠标时，它会在悬停时向后旋转360度：

.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函数，它改变了wheel元素的类来改变动画，并让ajax在同一个命中对着服务器回发。下一个问题是存储数据，因此您可能需要某种共享数据存储，例如数据库或键值服务器，您需要存储标识符（某种类型）并调用那些行反击。我建议反对一个文件，因为你可能会在单个文本文件中获得竞争条件。

计算完成的CSS动画总数

1 个答案: