Fiddle

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;
};

这里是一个小提琴忽略按钮，只是看看开发工具中的body标签

Fiddle

你可能需要做一些跨浏览器工作，但这是个主意。

这里有localStorage的填充https://gist.github.com/remy/350433

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

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

3 个答案:

Fiddle