Javascript - 记录用户在整个访问过程中按下给定按钮的时间

我对你的代码做了一些更改：

• 添加了全局变量
• 添加了几个缺失的括号
• 将侦听器附加到窗口
• 删除了对 DOM 元素的多个调用
• 为每个事件侦听器创建了一个函数
• 将经过的时间四舍五入到秒

var d0;
var d1;
var subtotal = 0;
var total = 0;
var div1 = document.getElementById("div1");
var text = document.getElementById("text");
window.addEventListener("keydown", dealWithKeyDown, false);
window.addEventListener("keyup", dealWithKeyUp, false);
function dealWithKeyDown(event) {
    if (event.keyCode == 86) {
        if (typeof d0 === 'undefined') {
            d0 = new Date();
        }
        d1 = new Date();        
        subtotal = Math.round((d1.getTime() - d0.getTime()) / 1000);  
        div1.innerHTML = subtotal;
        text.innerHTML = "Text to show";
    }
}
function dealWithKeyUp(event) {
    if (event.keyCode == 86) {
        total = total + subtotal;
        text.innerHTML = "";
        d0 = undefined;       
        Qualtrics.SurveyEngine.setEmbeddedData("readingtime", total);
    }
}

Okey dokey，由于发布的答案似乎都没有被接受，我将发布我自己的答案。

关于这个解决方案真的没什么好说的，它非常简单，很好地放入对象中，以便我们知道发生了什么，我什至给你一个小提琴！

问题我不知道我是否解决了，但有时按钮会显示它已被按下数百万秒，我认为这是因为 Key 没有正确初始化，这很奇怪，但它很少发生足以让我把修复它的负担放在你身上。

代码在这里：https://jsfiddle.net/vo2n1jw1/

粘贴到：

var Key = function(code)
{
    this.code = code;
};
Key.prototype.time = 0;
Key.prototype.pressedAt = 0;
Key.prototype.getTimeInSeconds = function()
{
    return this.time / 1000;
};
var Keyboard = function()
{
    this.keys = [];
};
Keyboard.prototype.addOrGetKey = function(code)
{
    var key = this.getKey(code);
    if(!key)
    {
        key = new Key(code);
        this.addKey(key);
    }
    return key;
};
Keyboard.prototype.addKey = function(key)
{
    this.getKeys()[key.code] = key;
};
Keyboard.prototype.getKey = function(code)
{
    return this.getKeys()[code];
};
Keyboard.prototype.getKeys = function()
{
    return this.keys;
};
Keyboard.prototype.printAllKeysIntoElement = function(element)
{
    var keys = this.getKeys();
    var length = keys.length;
    element.innerHTML = "";
    for(var i = 0; i < length; i++)
    {
        var key = keys[i];
        if(!key)
        {
            continue;
        }
        var keyElement = document.createElement("div");
        keyElement.innerHTML = "Button: " + key.code + " has been pressed for " + key.getTimeInSeconds() + " seconds";
        element.appendChild(keyElement);
    }
};
var KeyboardListener = function(keyboard, element)
{
    this.keyboard = keyboard;
    this.container = element;
    this.onKeyDownThis = this.onKeyDown.bind(this);
    document.addEventListener("keydown", this.onKeyDownThis, false);
    document.addEventListener("keyup", this.onKeyUp.bind(this), false);
};
KeyboardListener.prototype.onKeyDown = function(event)
{
    console.log("press");
    var keyboard = this.getKeyboard();
    var code = event.keyCode;
    var key = keyboard.addOrGetKey(code);
    key.pressedAt = Date.now();
    document.removeEventListener("keydown", this.onKeyDownThis, false);
    return false;
};
KeyboardListener.prototype.onKeyUp = function(event)
{
    console.log("release");
    var keyboard = this.getKeyboard();
    var code = event.keyCode;
    var key = keyboard.addOrGetKey(code);
    if(key.pressedAt)
    {
        key.time += Date.now() - key.pressedAt;
        keyboard.printAllKeysIntoElement(this.container);
    }
    document.addEventListener("keydown", this.onKeyDownThis, false);
    return false;
};
KeyboardListener.prototype.getKeyboard = function()
{
    return this.keyboard;
};
var resultsElement = document.getElementById("results");
var keyboard = new Keyboard();
var listener = new KeyboardListener(keyboard, resultsElement);

有 3 个对象：

钥匙键盘键盘监听

真的做他们听起来像的样子。

告诉我，如果你想解释什么。

哦，有一件事，我知道你不应该使用这样的数组，但我很懒。

您可以尝试在侦听器和函数外部创建一个变量，以便您可以在任何地方使用它。而且我认为你通过获得日期的时间做得很好。

var firstTime = new Date();
var totalTime = 0;
addEventListener("keydown", function(event) {
if (event.keyCode == 86) {
    document.getElementById("text").innerHTML = "Text to show";
    firstTime = new Date();
}
});
addEventListener("keyup", function(event) {
if (event.keyCode == 86) {
    document.getElementById("text").innerHTML = "";
    var d2 = new Date();
    var diff = d2.getTime() - firstTime.getTime();
    totalTime += diff;
    Qualtrics.SurveyEngine.setEmbeddedData("readingtime", totalTime);
}
});

最好将 d1 和 d2 变量声明为全局变量，而不是使用 html 元素作为存储。

var d1, d2;
var total_time = 0;
var key_pressed = false;
addEventListener("keydown", function(event) {
    if (event.keyCode == 86) {
        if (!key_pressed)
           d1 = new Date();
        key_pressed = true;
    }   
});
addEventListener("keyup", function(event) {
    if (event.keyCode == 86) {
        key_pressed = false;
        d2 = new Date();
        total_time += d2.getTime() - d1.getTime();
        Qualtrics.SurveyEngine.setEmbeddedData("readingtime", total_time);   
    }
});

当按住"v"键时，会反复调用 keydown 侦听器。这就是为什么有布尔变量，即"key_pressed"来检测第一时间的保持键。

"总时间"在哪里分配？

您的总时间是否有任何价值？您是否尝试使用浏览器控制台调试 javascript？

如果不想将数据存储到div，可以将其存储在全局变量中。

var times = {
    start: 0,
    total: 0
}
addEventListener("keydown", function(event) {
    if (event.keyCode == 86) { 
        // i think your hole code should be executed only on releasing this one button
        document.getElementById("text").innerHTML = "Text to show";
        times.start = new Date();
    }
});
addEventListener("keyup", function(event) {
    if (event.keyCode == 86) {
        // i think your hole code should be executed only on releasing this one button
        document.getElementById("text").innerHTML = "";
        var diff = new Date().getTime() - times.start.getTime();
        times.total = times.total + diff;
        Qualtrics.SurveyEngine.setEmbeddedData("readingtime", times.total);
    }
});

因此，您可以使用事件侦听器函数外部的 var 时间来声明其全局。

我注意到你使用了没有 { 和 } 的 if （）..，所以只有下一行受到影响，如果你想要，我不会舒尔。