JS实现记录用户在网站的停留时间

JS实现记录用户在网站的停留时间

今天给了一个需求让实现记录用户在当前页面进行操作的时间,如果两分钟之内没有进行操作就停止记时,直到再次操作时才开始继续记时。起初我自己用监听加定时器的方案实现,但是逻辑走不通,实现不了效果,后来,就求助度娘,结果就找到了一个前辈的一篇笔记,正好可以实现我的需求。所以我就在前辈的代码上加入了我的逻辑实现了这个需求哈哈。前辈的笔记链接 ↓ 下面也贴上我的代码方便后期查看

		var date1 = Date.parse(new Date());
		var date2 = null
        var dateValue = 0
        var eventing = 0
        function ScreenSaver(settings) {
            this.settings = settings;
            this.nTimeout = this.settings.timeout;
            document.body.screenSaver = this;
            // link in to body events      
            document.body.onmousemove = ScreenSaver.prototype.onevent;
            document.body.onmousedown = ScreenSaver.prototype.onevent;
            document.body.onkeydown = ScreenSaver.prototype.onevent;
            document.body.onkeypress = ScreenSaver.prototype.onevent;
            var pThis = this;
            var f = function () { pThis.timeout(); }
            this.timerID = window.setTimeout(f, this.nTimeout);
        }
        ScreenSaver.prototype.timeout = function () {
            var pThis = this;
            if (!this.saver) {
                eventing = 0
                /* 120s 后无操作停止记录时间 计算此刻与最初的时间差 */
                console.log("120秒内无操作,开始停止计时");
                date2 = Date.parse(new Date())
                dateValue += date2 - date1
            }
        }
        ScreenSaver.prototype.signal = function () {
            if (this.saver) {
                this.saver.stop();
            }
            window.clearTimeout(this.timerID);
            var pThis = this;
            var f = function () { pThis.timeout(); }
            this.timerID = window.setTimeout(f, this.nTimeout);
        }

        ScreenSaver.prototype.onevent = function (e) {
            this.screenSaver.signal();
            eventing++
            /* console.log("开始操作", eventing) */
            if (eventing == 1) {
                /* 页面刚进来有操作后才开始计算时间 */
                /* 5秒过后又重新操作了也重新开始计算时间 */
                date1 = Date.parse(new Date())
            }
        }

        var saver;
        function initScreenSaver() {
            //blort;      
            saver = new ScreenSaver({ timeout: 120000 });   //无动作时间  
        }
        window.onload = function () {
            initScreenSaver();
        }
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页