测量输入时间
Measuring time for input
>我有一个简单的测验表格，有几个输入和选择，我需要测量参赛者写/选择答案所花费的时间。
这就是我正在尝试的，但它报告了不正确的时间：
$('input, select').on('focus', function(event) {
el = $(this);
name = el.attr('name'); // console.log(name);
a = performance.now();
a_value = el.val();
console.log(name + ' focused.');
$(el).on('input select cut copy paste', function(event) {
console.log('el: ' + el);
b_value = el.val();
if (a_value != b_value) {
b = performance.now();
if (name in times) {
console.log('exists');
times[name] = times[name] + (b - a);
} else {
times[name] = b - a;
}
}
});
$(el).on('blur', function(event) {
alert(times);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<input type="text" name="" id="">
<select name="" id="">
<option value="">option1</option>
<option value="">option2</option>
</select>
</body>
</html>在与您(OP(交谈后，我对基本代码进行了一些调整。
首先，每次表单元素具有焦点时都会调用.on('input ...')，因此事件处理程序堆叠在一起。在模糊处理程序中调用相应的.off('input ...')来处理此问题。
接下来，要在 JavaScript 中创建一个关联数组，我们通常使用对象，所以我做了times = {} .
接下来，times[name] = times[name] + (b - a);继续使用元素首次聚焦时的初始时间值a，因此聚合时间会快速叠加。我们可以通过事后设置a = b;来弥补这一点。
最后，为了跟踪选择何时更改，就像输入更改时一样，我们可以更新内部选择值，例如a_value = b_value;选择更改时。
我希望这就是你要找的。
var times = {};
$('input, select').on('focus', function(event) {
var el = $(this);
// This will get the name of the input or select. Is that right?
// OP: yes, this becomes the key in the array
var name = el.attr('name');
var a = performance.now();
var a_value = el.val();
// This will attach an event handler over and over unless we
// unattach it. Please see "blur" below
el.on('input select cut copy paste', function(event) {
var b_value = el.val();
// Initial values are updated as inputs change
// so the times don't stack up
if (a_value !== b_value) {
b = performance.now();
if (times.hasOwnProperty(name)) {
console.log('exists');
times[name] = times[name] + (b - a);
a = b;
} else {
console.log('adding ' + name);
times[name] = b - a;
}
a_value = b_value;
}
});
el.one('blur', function(event) {
console.dir(times);
// Update the times display
displayTimes();
// Unattach the event handler added in on("focus")
el.off('input select cut copy paste');
});
// For the demo
function displayTimes() {
// Output results
var str = "";
$.each(times, function(key, value) {
str += key + " total time: " + value + "<br>";
});
$("#results").html(str);
}
// Periodically update the times just for the demo
setInterval(displayTimes, 200);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="input" id="">
<select name="select" id="">
<option value="option1">option1</option>
<option value="option2">option2</option>
</select>
<div id="results"></div>试试这个..
<script>
var Stopwatch = (function() {
var s;
return {
settings: {
stop: 0,
sw: document.querySelectorAll(".stopwatch")[0],
results: document.querySelectorAll(".results")[0],
mills: 0,
secs: 0,
mins: 0,
i: 1,
times: ["00:00:00"],
clearButton: "<a href='"#'" class='"button'" onClick='"Stopwatch.clear();'">Clear</a>"
},
init: function() {
s = this.settings;
setInterval(this.timer, 1);
},
clear: function() {
s.i = 1,
s.times = ["00:00:00"],
s.results.innerHTML = s.clearButton;
},
lap: function() {
if (s.i === 1) {
s.results.innerHTML = s.clearButton;
}
s.times.push(("0" + s.mins).slice(-2) + ":"
+ ("0" + s.secs).slice(-2) + ":"
+ ("0" + s.mills).slice(-2));
var diffTime = ("0" + Math.floor(s.times[s.i].split(":")[0]
- s.times[s.i-1].split(":")[0])).slice(-2)
+ ":"
+ ("0" + Math.floor(s.times[s.i].split(":")[1]
- s.times[s.i-1].split(":")[1])).slice(-2)
+ ":"
+ ("0" + (s.times[s.i].split(":")[2]
- s.times[s.i-1].split(":")[2])).slice(-2);
s.results.innerHTML = s.results.innerHTML + "<tr><td>"
+ s.times[s.i] + "</td><td>"
+ diffTime + "</td></tr>";
s.i++;
},
restart: function() {
s.mills = 0,
s.secs = 0,
s.mins = 0;
this.start();
},
start: function() {
s.stop = 0;
},
stop: function() {
s.stop = 1;
},
timer: function() {
if (s.stop === 0) {
if (s.mills === 100) {
s.secs++;
s.mills = 0;
}
if (s.secs === 60) {
s.mins++;
s.secs = 0;
}
s.sw.innerHTML = ("0" + s.mins).slice(-2) + ":"
+ ("0" + s.secs).slice(-2) + ":"
+ ("0" + s.mills).slice(-2);
s.mills++;
}
}
};
})();
$('.textbox,.selectbox').focusin(function(event) {
Stopwatch.init();
Stopwatch.restart();
});
$('.textbox,.selectbox').on('blur', function(event) {
Stopwatch.stop();
});
在这里工作小提琴
引用
我为此制作了简单的jquery插件。它能够告诉您任何输入元素的总编辑时间(仅在实际使用编辑时(、首次编辑时间和上次编辑时间。您还可以获取所有编辑时间。
(function () {
var getTime = function () { return performance.now(); };
function MeasureTime () {
this.editTimes = [];
this.currentEdit = null;
this.lastEdit = {start:0, last: 0};
this.firstEdit = 0;
}
MeasureTime.prototype = {
setFirst: function () {
this.firstEdit = getTime();
this.setFirst = new Function();
},
startEdit: function (val) {
this.setFirst();
if(this.currentEdit == null) {
this.currentEdit = {start: getTime(), last: getTime(), value: val};
this.editTimes.push(0);
} else {
this.edit(val);
}
},
edit: function (val) {
if(this.currentEdit == null)
this.startEdit(val);
else {
var current = this.currentEdit;
if(current.value == val)
return;
current.last = getTime();
this.editTimes.pop();
this.editTimes.push(current.last - current.start);
}
},
stopEdit: function () {
if(this.currentEdit != null) {
this.lastEdit = this.currentEdit;
this.currentEdit = null;
}
},
getEvent: function () {
return new TimeMeasuredEvent(this.editTimes, this.currentEdit || this.lastEdit, this.firstEdit);
}
};
function TimeMeasuredEvent (all, current, first) {
this.all = all.slice(0);
this.start = current.start;
this.last = current.last;
this.first = first;
}
TimeMeasuredEvent.prototype = {
current: function () {
return this.all[this.all.length-1];
},
total: function () {
var sum = 0, a = this.all, l = a.length, i = -1;
while(++i<l)
sum+=a[i];
return sum;
}
};
function EnsureMeasureTime () {
if (typeof(this.measureTimeData) === "undefined") {
var mtd = this.measureTimeData = new MeasureTime();
$(this).on('focus', function () {
mtd.startEdit(this.value);
$(this).on('input.measuretime select.measuretime cut.measuretime copy.measuretime paste.measuretime', function () {
mtd.edit(this.value);
$(this).trigger('timeMeasured', [mtd.getEvent()]);
});
$(this).on('blur', function () {
mtd.stopEdit();
$(this).trigger('timeMeasured', [mtd.getEvent()]);
$(this).off('measuretime');
});
});
}
}
$.fn.measureTime = function () {
$(this).each(EnsureMeasureTime);
return this;
};
})();
示例用法(小提琴(：
var inputs = $('input, select');
inputs.measureTime();
var all = {};
inputs.on('timeMeasured', function (ev, data) {
console.log(ev, data);
all[ev.target.name] = data.total();
console.log("First edit time: " + data.first);
console.log("Last edit time: " + data.last);
console.log("All edits durations: " + data.all.join(", "));
console.log("Current edit duration: " + data.current());
console.log("Total edit duration: " + data.total());
var s = "";
for(var n in all) {
s+= n + ": " + all[n]+"'n";
}
$("#times").text(s);
});
您还可以通过element.measureTimeData访问原始 MeasureTime 对象以获取编辑时间。
你可以在这个小提琴中找到我尝试过的东西。对我来说，重点是你一遍又一遍地加时间，因为初始时间没有改变，而且你不止一次地添加回答时间。
if (name in times) {
console.log('exists');
times[name] = times[name] + (b - a);
//here you already had added (b1 - a) with b1 < b
//either you reset 'a' here or you store the diff in a variable and sum it up at the end
} else {
times[name] = b - a;
}
我将应答时间存储在一个变量中，并添加到blur的数组中，并尝试与您的原始方法尽可能保持一致。
不过，我仍然错过了一些东西。这主要与作弊有关。据我所知，您只想计算实际的变化时间(从focus到最后input，例如，不计算从最后input到blur的时间，绝对不是查看页面的时间，也许在写字板环境中写答案(。
在一个公平和安全的系统中，恕我直言，你应该考虑某人可以查看测验的时间，而不是他/她实际写答案的时间。但这显然取决于测验的目的！
相关文章：
- Javascript-如何使用bootstrap日期时间选择器自动计算两个时间输入之间的差异
- 为什么我的AngularJS ngModel绑定到时间输入，而不绑定到日期输入
- j查询日期选取器不显示时间输入值
- 在javascript中找到差异btw两个时间输入
- 如何在角度js中计算2种HTML5时间输入类型之间的差异
- 将用户的本地时间输入我的 Rails 应用程序
- 如何将 jQuery 侦听器添加到 CakePHP 时间输入中
- 使用日期对象显示带有UTC日期时间输入的本地时间
- Django在表单时间输入中截断am/pm
- 从javascript启动本地时间输入
- 如何在Javascript本地存储中使用html表单时间输入
- 自动时间输入的形式Javascript
- 为什么在angularjs中，时间输入字段希望是一个日期
- 设置时间输入为datetime从数据库
- 如何防止秒部分显示在HTML5时间输入元素上?
- Jquery掩码-查询时间输入
- 从 HTML 时间输入中获取 AM/PM
- 任何时区的用户都以太平洋时间输入日期
- 如何将日期和时间输入中的值合并到一个日期对象
- 如何强制秒出现在 HTML5“时间”输入控件上
