我将如何跟踪用户在网站上的点击次数,并相应地更改背景,例如:当用户登陆第一页时,背景是一个小对象,然后当用户浏览网站时,背景变化,根据点击了多少链接,然后循环。
这些是我提出的想法:
跟踪每个页面上的传入源,如果源来自该站点,则将 1 加到存储在 cookie 中的计数器,检索 cookie 并显示相应的背景。
或点击链接以在 cookie 中添加一个计数器。
还有其他建议或想法吗?或者这是不好的做法还是一个非常糟糕的主意?
ps 重新研究我尝试并没有找到任何有用的东西
您可以使用 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);
});
可以使用简单的 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++;
};
你可以这样做
// 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,那么这似乎不是该站点的高优先级功能,因此唯一不起作用的就是重新加载时的状态更改