此特定代码如何在页面加载本身上工作,甚至刷新页面计时器值也仅在单击“提交”停止时才保持勾选状态?
我想我们需要将计时器存储在localStorage上并在单击提交时销毁存储吗?
$(function() {
// Some global variables
var startTime = 0,
elapsed = 0,
timerId = 0,
$timer = $("#timer");
function formatTime(time) {
var hrs = Math.floor(time / 60 / 60 / 1000),
min = Math.floor((time - hrs * 60 * 60 * 1000) / 60 / 1000),
sec = Math.floor((time - hrs * 60 * 60 * 1000 - min * 60 * 1000) / 1000);
hrs = hrs < 10 ? "0" + hrs : hrs;
min = min < 10 ? "0" + min : min;
sec = sec < 10 ? "0" + sec : sec;
return hrs + ":" + min + ":" + sec;
}
function elapsedTimeFrom(time) {
return formatTime(time - startTime + elapsed);
}
function showElapsed() {
$timer.text(elapsedTimeFrom(Date.now()));
}
function startTimer() {
// React only if timer is stopped
startTime = startTime || Date.now();
timerId = timerId || setInterval(showElapsed, 1000);
localStorage.setItem('startTime');
}
function pauseTimer() {
// React only if timer is running
if (timerId) {
clearInterval(timerId);
elapsed += Date.now() - startTime;
startTime = 0;
timerId = 0;
}
}
function resetTimer() {
clearInterval(timerId);
$timer.text("00:00:00");
startTime = 0;
elapsed = 0;
timerId = 0;
}
function editTimer() {
pauseTimer();
$timer.prop("contenteditable", true);
$timer.css("border", "1px solid red");
}
function setElapsed() {
var time = $timer.text(),
arr = time.split(":");
$timer.prop("contenteditable", false);
$timer.css("border", "1px solid black");
elapsed = parseInt(arr[0] * 60 * 60, 10);
elapsed += parseInt(arr[1] * 60, 10);
elapsed += parseInt(arr[2], 10);
elapsed *= 1000;
}
function sendTime() {
pauseTimer();
// Set hidden input value before send
$("[name='time']").val(formatTime(elapsed));
}
$("[name='start']").click(startTimer);
$("[name='stop']").click(pauseTimer);
$("[name='reset']").click(resetTimer);
$timer.dblclick(editTimer);
$timer.blur(setElapsed);
$("form").submit(sendTime);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="timer">00:00:00</div>
</h1>
<form action="" method="post" ame="xyz">
<input type="button" name="start" value="Start" class="btn btn-primary mb-2">
<input type="button" name="stop" value="Stop" class="btn btn-primary mb-2">
<input type="submit" name="action" value="Submit" class="btn btn-primary mb-2">
<input type="hidden" name="time" value="00:00:00">
</form>
您需要在localStorage中设置变量,而不仅仅是名称
我已注释掉这些调用,因为它们在StackSnippets中不起作用
复制到服务器时,只需取消注释它们即可。
$(function() {
// Some global variables
var startTime = 0;
elapsed = 0,
timerId = 0,
$timer = $("#timer");
function formatTime(time) {
var hrs = Math.floor(time / 60 / 60 / 1000),
min = Math.floor((time - hrs * 60 * 60 * 1000) / 60 / 1000),
sec = Math.floor((time - hrs * 60 * 60 * 1000 - min * 60 * 1000) / 1000);
hrs = hrs < 10 ? "0" + hrs : hrs;
min = min < 10 ? "0" + min : min;
sec = sec < 10 ? "0" + sec : sec;
return hrs + ":" + min + ":" + sec;
}
function elapsedTimeFrom(time) {
return formatTime(time - startTime + elapsed);
}
function showElapsed() {
$timer.text(elapsedTimeFrom(Date.now()));
}
function startTimer() {
// React only if timer is stopped
// startTime = localStorage.getItem('startTime') || Date.now();
startTime || Date.now(); // remove and uncomment above
timerId = timerId || setInterval(showElapsed, 1000);
// localStorage.setItem('startTime',startTime);
}
function pauseTimer() {
// React only if timer is running
if (timerId) {
clearInterval(timerId);
elapsed += Date.now() - startTime;
startTime = 0;
timerId = 0;
}
}
function resetTimer() {
clearInterval(timerId);
$timer.text("00:00:00");
startTime = 0;
elapsed = 0;
timerId = 0;
}
function editTimer() {
pauseTimer();
$timer.prop("contenteditable", true);
$timer.css("border", "1px solid red");
}
function setElapsed() {
var time = $timer.text(),
arr = time.split(":");
$timer.prop("contenteditable", false);
$timer.css("border", "1px solid black");
elapsed = parseInt(arr[0] * 60 * 60, 10);
elapsed += parseInt(arr[1] * 60, 10);
elapsed += parseInt(arr[2], 10);
elapsed *= 1000;
}
function sendTime() {
pauseTimer();
// Set hidden input value before send
$("[name='time']").val(formatTime(elapsed));
// localStorage.removeItem('startTime');
}
$("[name='start']").click(startTimer);
$("[name='stop']").click(pauseTimer);
$("[name='reset']").click(resetTimer);
$timer.dblclick(editTimer);
$timer.blur(setElapsed);
$("form").submit(sendTime);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="timer">00:00:00</div>
</h1>
<form action="" method="post" ame="xyz">
<input type="button" name="start" value="Start" class="btn btn-primary mb-2">
<input type="button" name="stop" value="Stop" class="btn btn-primary mb-2">
<input type="submit" name="action" value="Submit" class="btn btn-primary mb-2">
<input type="hidden" name="time" value="00:00:00">
</form>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句