html - 计算用户在整个网站上的总点击次数并相应地更改背景

Question

我将如何跟踪用户在网站上的点击次数，并相应地更改背景，例如：当用户登陆第一页时，背景是一个小对象，然后当用户浏览网站时，背景变化，根据点击了多少链接，然后循环。

这些是我提出的想法：

跟踪每个页面上的传入源，如果源来自该站点，则将 1 加到存储在 cookie 中的计数器，检索 cookie 并显示相应的背景。

或点击链接以在 cookie 中添加一个计数器。

还有其他建议或想法吗？或者这是不好的做法还是一个非常糟糕的主意？

ps 重新研究我尝试并没有找到任何有用的东西

Answer 1

您可以使用 jQuery 轻松做到这一点：

编辑$.cookie用法：

var totalClicks = ($.cookie('totalClicks' !== null) ? $.cookie('totalClicks') : 0;
var clicksLimit = 10;

$.cookie('clicksLimit', clicksLimit); // just so that you do not have to re-declare this variable on the other page.

$('body').on('click', '*', function() {
    totalClicks++;

    if(totalClicks >= clicksLimit) {
        alert('do something here...');

        // precise to your request:
        $('body').css('background-color', '#f00'); // will turn body background to "red"
    }

    $.cookie('totalClicks', totalClicks);
});

Answer 2

可以使用简单的 javascript 来完成，使用 jQuery 会增加服务器的负载：

var clicks = 0;
var limit = 10;

document.onclick = function() {
    if(clicks == 1) document.body.style.backgroundColor = "#FFF";
    if(clicks == 2) document.body.style.backgroundColor = "#EEE";
    if(clicks == 3) document.body.style.backgroundColor = "#DDD";
    if(clicks == 4) document.body.style.backgroundColor = "#CCC";
    ....
    clicks++;
};

Answer 3

你可以这样做

// Get click amount from localStorage or use 0 if it doesn't exist
var clicks = localStorage['clicks'] || 0;

// Add the click className to the body first 
document.body.className = 'style-' + clicks;

// Set a eventListener 
document.addEventListener('click', function(){
   // clicks + 1
   clicks++;

   // Add new class name
   document.body.className = 'style-' + clicks;

}, false);


// When the window is about to be closed save the clicks in localStorage
window.onbeforeunload = function(){
   localStorage['clicks'] = clicks;
};

这是一个小提琴忽略按钮，只需查看开发工具中的主体标签

小提琴

你可能需要做一些跨浏览器的工作，但这就是想法。

这里有一个用于 localStorage 的 polyfill https://gist.github.com/remy/350433

但是---如果浏览器不支持localStorage，那么这似乎不是该站点的高优先级功能，因此唯一不起作用的就是重新加载时的状态更改