在请求之间使秒表保持活动状态
Make stopwatch alive between request
我是 Ractive.js 的新手。我需要实现一个秒表,即使我点击另一个页面,它也会是 运行。我的秒表是 运行,但是当我单击另一个页面然后返回当前页面时,秒表不见了。谁能帮我解决这个问题?以下是我的尝试:
在我看来>>>
<div class="modal-footer">
<div class="form-group">
<div class="pull-left">
Stopwatch: {{#stopWatch}} {{hours}} h: {{minutes}} m: {{seconds}} s{{/stopWatch}}
</div>
<button id="btnStart" class="btn btn-primary" type="button" on-click="startStopWatch">Start</button>
<button id="btnReset" class="btn btn-secondary" type="button" on-click="startStopWatch">Reset</button>
</div>
<label class="pull-left stopWatch"> Time Spent:</label>
</div>
我的 startStopWatch 函数 >>>
function startStopWatch(ev, cfg) {
var rjs = this || cfg.rjs;
var $btn = $(ev.node);
var btnText = $btn.text();
var sg;
if (btnText === 'Start') {
$btn.html('Stop');
sg = new cmnDt.stopWatch();
sg.start(rjs, sg);
} else if (btnText === 'Stop'){
$btn.html('Start');
sg = ev.context.sw;
sg.stop(rjs, sg);
}
if (btnText === 'Reset' && ev.context.sw) {
sg = ev.context.sw;
sg.reset(rjs, sg);
$('#btnStart').html('Start');
}
}
我的秒表功能>>>
function stopWatch() {
var currentSeconds = 0;
var currentMinutes = 0;
var currentHours = 0;
var timer;
function start(rjs, sw) {
printTime(rjs, sw);
timer = setInterval(function () {
getTime();
printTime(rjs, sw);
}, 1000);
}
function getTime(rjs) {
currentSeconds = currentSeconds + 1;
if (currentSeconds === 60) {
currentMinutes += Math.round((currentSeconds) / 60);
currentSeconds = 0;
} else if (currentSeconds === 60 && currentMinutes === 60) {
currentMinutes = 0;
currentSeconds = 0;
currentHours += 1;
}
}
function printTime(rjs, sw) {
rjs.set({'sw': sw, 'stopWatch.seconds': currentSeconds,
'stopWatch.minutes': currentMinutes, 'stopWatch.hours': currentHours});
}
function stop(rjs, sw) {
clearInterval(timer);
printTime(rjs, sw);
$('.stopWatch').text(' Time Spent: ' + currentMinutes + ' m : ' + currentSeconds + ' s.');
}
function reset(rjs, sw) {
clearInterval(timer);
currentSeconds = 0;
currentMinutes = 0;
currentHours = 0;
printTime(rjs, sw);
}
return {
start: start,
stop: stop,
reset: reset
};
}
如果您更改站点并返回,您的整个脚本将从头开始初始化。您需要永久存储秒表的当前值和当前值的时间戳。
对此有两个选择:本地storage and cookies。
在 ractive 中,这是一个如何使用本地存储的示例:http://examples.ractivejs.org/todos
如果您实现了一个功能 saveToStorage()
和一个 initFromStorage()
,那么如果您返回该站点,您的秒表可能会显示真实时间。但是要注意秒表不是"running in some background"。它只是从存储的最后一刻开始初始化。这很重要,因为例如当您在另一个站点时,您的秒表无法触发事件。
编辑 15.3.16
在 fiddle 中找到可用的秒表:
https://jsfiddle.net/cw67L17e/2/
我开始修改你的代码,但我认为最好从头开始设计。没时间深究ractivejs的特长。但我确实希望你能通过研究它学到一些新的和有用的想法。右侧的 fiddle 中有简短的使用提示。
备注:
- 只是为了计时,不需要狭义的"stop watch"。正如您将看到的,存储时间戳就足够了。您实际上只需要
prepareToLeave()
和 resume()
方法。
- 我建议不要将秒、分和小时作为组合类型处理。只需处理时间戳并在必要时转换它们,如
millisToHMS()
所示。因为处理 millis 是一种通用方法,它也将允许许多其他任务。
- 考虑
localStorage.setItem()
和 localStorage.getItem()
。
- 如果要自动化,可以在文档准备好或加载 (
document.ondomcontentready
) 后立即调用 resume()
。在那里你必须找到你的 ractivejs 方式。
我是 Ractive.js 的新手。我需要实现一个秒表,即使我点击另一个页面,它也会是 运行。我的秒表是 运行,但是当我单击另一个页面然后返回当前页面时,秒表不见了。谁能帮我解决这个问题?以下是我的尝试:
在我看来>>>
<div class="modal-footer">
<div class="form-group">
<div class="pull-left">
Stopwatch: {{#stopWatch}} {{hours}} h: {{minutes}} m: {{seconds}} s{{/stopWatch}}
</div>
<button id="btnStart" class="btn btn-primary" type="button" on-click="startStopWatch">Start</button>
<button id="btnReset" class="btn btn-secondary" type="button" on-click="startStopWatch">Reset</button>
</div>
<label class="pull-left stopWatch"> Time Spent:</label>
</div>
我的 startStopWatch 函数 >>>
function startStopWatch(ev, cfg) {
var rjs = this || cfg.rjs;
var $btn = $(ev.node);
var btnText = $btn.text();
var sg;
if (btnText === 'Start') {
$btn.html('Stop');
sg = new cmnDt.stopWatch();
sg.start(rjs, sg);
} else if (btnText === 'Stop'){
$btn.html('Start');
sg = ev.context.sw;
sg.stop(rjs, sg);
}
if (btnText === 'Reset' && ev.context.sw) {
sg = ev.context.sw;
sg.reset(rjs, sg);
$('#btnStart').html('Start');
}
}
我的秒表功能>>>
function stopWatch() {
var currentSeconds = 0;
var currentMinutes = 0;
var currentHours = 0;
var timer;
function start(rjs, sw) {
printTime(rjs, sw);
timer = setInterval(function () {
getTime();
printTime(rjs, sw);
}, 1000);
}
function getTime(rjs) {
currentSeconds = currentSeconds + 1;
if (currentSeconds === 60) {
currentMinutes += Math.round((currentSeconds) / 60);
currentSeconds = 0;
} else if (currentSeconds === 60 && currentMinutes === 60) {
currentMinutes = 0;
currentSeconds = 0;
currentHours += 1;
}
}
function printTime(rjs, sw) {
rjs.set({'sw': sw, 'stopWatch.seconds': currentSeconds,
'stopWatch.minutes': currentMinutes, 'stopWatch.hours': currentHours});
}
function stop(rjs, sw) {
clearInterval(timer);
printTime(rjs, sw);
$('.stopWatch').text(' Time Spent: ' + currentMinutes + ' m : ' + currentSeconds + ' s.');
}
function reset(rjs, sw) {
clearInterval(timer);
currentSeconds = 0;
currentMinutes = 0;
currentHours = 0;
printTime(rjs, sw);
}
return {
start: start,
stop: stop,
reset: reset
};
}
如果您更改站点并返回,您的整个脚本将从头开始初始化。您需要永久存储秒表的当前值和当前值的时间戳。
对此有两个选择:本地storage and cookies。
在 ractive 中,这是一个如何使用本地存储的示例:http://examples.ractivejs.org/todos
如果您实现了一个功能 saveToStorage()
和一个 initFromStorage()
,那么如果您返回该站点,您的秒表可能会显示真实时间。但是要注意秒表不是"running in some background"。它只是从存储的最后一刻开始初始化。这很重要,因为例如当您在另一个站点时,您的秒表无法触发事件。
编辑 15.3.16
在 fiddle 中找到可用的秒表:
https://jsfiddle.net/cw67L17e/2/
我开始修改你的代码,但我认为最好从头开始设计。没时间深究ractivejs的特长。但我确实希望你能通过研究它学到一些新的和有用的想法。右侧的 fiddle 中有简短的使用提示。
备注:
- 只是为了计时,不需要狭义的"stop watch"。正如您将看到的,存储时间戳就足够了。您实际上只需要
prepareToLeave()
和resume()
方法。 - 我建议不要将秒、分和小时作为组合类型处理。只需处理时间戳并在必要时转换它们,如
millisToHMS()
所示。因为处理 millis 是一种通用方法,它也将允许许多其他任务。 - 考虑
localStorage.setItem()
和localStorage.getItem()
。 - 如果要自动化,可以在文档准备好或加载 (
document.ondomcontentready
) 后立即调用resume()
。在那里你必须找到你的 ractivejs 方式。