我正在构建一个需要计时器的Web应用程序:启动,停止和重置特定事件。在这些之后,我想将变量保存在像" highscore"列表。
该应用程序应与AR眼镜一起用于维护工作。
应用程序应包括应测量作业持续时间的功能。
这是与我的问题相关的代码:
JS:
var clsStopwatch = function() {
// Private vars
var startAt = 0; // Time of last start / resume. (0 if not running)
var lapTime = 0; // Time on the clock when last stopped in milliseconds
var now = function() {
return (new Date()).getTime();
};
// Public methods
// Start or resume
this.start = function() {
startAt = startAt ? startAt : now();
};
// Stop or pause
this.stop = function() {
// If running, update elapsed time otherwise keep it
lapTime = startAt ? lapTime + now() - startAt : lapTime;
startAt = 0; // Paused
};
// Reset
this.reset = function() {
lapTime = startAt = 0;
};
// Duration
this.time = function() {
return lapTime + (startAt ? now() - startAt : 0);
};
};
var x = new clsStopwatch();
var $time;
var clocktimer;
var ourTime = 3;
function pad(num, size) {
var s = "0000" + num;
return s.substr(s.length - size);
}
function formatTime(time) {
var h = m = s = ms = 0;
var newTime = '';
h = Math.floor( time / (60 * 60 * 1000) );
time = time % (60 * 60 * 1000);
m = Math.floor( time / (60 * 1000) );
time = time % (60 * 1000);
s = Math.floor( time / 1000 );
ms = time % 1000;
newTime = pad(h, 2) + ':' + pad(m, 2) + ':' + pad(s, 2) + ':' + pad(ms, 3);
return newTime;
}
function show() {
$time = document.getElementById('time');
update();
}
function update() {
$time.innerHTML = formatTime(x.time());
}
function start() {
clocktimer = setInterval("update()", 1);
x.start();
}
function stop() {
x.stop();
clearInterval(clocktimer);
}
function reset() {
stop();
x.reset();
update();
}
HTML:
<head>
<meta charset="UTF-8">
<title>Stopwatch</title>
</head>
<body onload="show();">
<div>Time: <span id="time"></span></div>
<input type="button" value="start" onclick="start();">
<input type="button" value="stop" onclick="stop();">
<input type="button" value="reset" onclick="reset()">
</body>
<div id="result"></div>
<script>
if (typeof(Storage) != "undefined") {
// Store
localStorage.setItem("lastname", ourTime);
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}
</script>
在此示例中,值3
已保存并正确显示,但我无法显示秒表停止后的时间。
我想出的最好的是:
var ourTime = formatTime(X)
这将以正确的格式显示数字,但值始终为00:00:00或未定义。如何获得正确的秒表停止值?
答案 0 :(得分:1)
问题是您尝试更新未定义的字段; update()中调用的$ time值设置为NULL。为了解决这个问题,我在start()中声明了$ time,现在它似乎正常工作。你根本就没有使用show()函数,所以我把它遗漏了,就像localStorage一样,因为它没有对问题做出贡献而且没有定义xy,因此它只是为我们创建了一个错误。 / p>
<div>Time: <span id="time"></span></div>
<input type="button" value="start" onclick="start();">
<input type="button" value="stop" onclick="stop();">
<input type="button" value="reset" onclick="reset()">
$ cat input
first line
2nd line
last line (4) with some data
$ awk -F'[()]' 'END{print $2}' input
4