如何解决Javascript:如何从给定的 HH:MM:SS 启动秒表? 更新
更新
现在设法从 01:02:03 开始。startTime = new Date().getTime()-(seconds);
但是当我恢复秒表时,它不会从暂停的地方继续。 例如, 我在 00:07:45 暂停。我想恢复它,但我收到了 00:15:30。
你好吗?希望你们今天或晚上都过得愉快。
所以我这里有一个小问题。我有一个秒表。我希望秒表从显示的特定时间开始运行。
例如, 现在秒表上显示的时间是 01:02:03。我希望秒表从 01:02:03 开始。
我对此进行了研究。它与 Epoch Javascript 有关。我将 01:02:03 转换为毫秒。但它不是从 01:02:03 开始的。相反,它从 22:52:34 开始。
我不确定我哪里做错了。请赐教。
脚本
/*Global variables here*/
var startTime;
var updatedTime;
var difference;
var tInterval;
var savedTime;
var paused = 0;
var running = 0;
/**This function is triggered when user starts the stopwatch.**/
function startTimer(){
if(!running){
// getting the displayed time
startTime = document.querySelector('#stopwatch_display').innerText;
var a = startTime.split(':');
var seconds = (a[0]*1000*60*60)+(a[1]*1000*60)+(a[2]*1000);
startTime = new Date(seconds+1);
tInterval = setInterval(getShowTime,1);
// change 1 to 1000 above to run script every second instead of every millisecond. one other change will be needed in the getShowTime() function below for this to work. see comment there.
paused = 0;
running = 1;
// Some styling here
}
}
/**This function is triggered when user pauses and resumes the stopwatch.**/
function pauseTimer(){
if (!difference){
// if timer never started,don't allow pause button to do anything
} else if (!paused) {
clearInterval(tInterval);
savedTime = difference;
paused = 1;
running = 0;
// Some styling here
} else {
// if the timer was already paused,when they click pause again,start the timer again
startTimer();
}
}
/**This function is triggered when user resets the stopwatch.**/
function resetTimer(){
clearInterval(tInterval);
savedTime = 0;
difference = 0;
paused = 0;
running = 0;
// Some styling here
}
/**This function is to display the time.**/
function getShowTime(){
updatedTime = new Date().getTime();
if (savedTime){
difference = (updatedTime - startTime) + savedTime;
} else {
difference = updatedTime - startTime;
}
var hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((difference % (1000 * 60)) / 1000);
//var milliseconds = Math.floor((difference % (1000 * 60)) / 100);
hours = (hours < 10) ? "0" + hours : hours;
minutes = (minutes < 10) ? "0" + minutes : minutes;
seconds = (seconds < 10) ? "0" + seconds : seconds;
//milliseconds = (milliseconds < 100) ? (milliseconds < 10) ? "00" + milliseconds : "0" + milliseconds : milliseconds;
timerdisplay.innerHTML = hours + ':' + minutes + ':' + seconds;
}
解决方法
getShowTime
应该只计算当前时间。暂停后,脚本应依靠 startTimer
继续计时。以下是更改后的代码:
function startTimer(){
if(!running){ // Check if the timer is running
if (savedTime) { // Are we continuing after pausing?
startTime = (+ new Date()) - savedTime; // If yes,then start from the savedTime
} else {
// If no,get the startTime from the element
startTime = timerDisplay.innerText;
var a = startTime.split(':');
var seconds = (a[0]*1000*60*60)+(a[1]*1000*60)+(a[2]*1000);
startTime = (+ new Date()) - seconds;
}
tInterval = setInterval(getShowTime,1); // Start the interval
running = true; // Tell the script that the stopwatch is running
}
}
function getShowTime(){
updatedTime = + new Date(); // Get current time. Use '+ new Date()' instead because it is much shorter.
difference = updatedTime - startTime; // Get the amount of seconds
// Calculate the different parts
var hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((difference % (1000 * 60)) / 1000);
//var milliseconds = Math.floor((difference % (1000 * 60)) / 100);
hours = (hours < 10) ? "0" + hours : hours;
minutes = (minutes < 10) ? "0" + minutes : minutes;
seconds = (seconds < 10) ? "0" + seconds : seconds;
//milliseconds = (milliseconds < 100) ? (milliseconds < 10) ? "00" + milliseconds : "0" + milliseconds : milliseconds;
// Update on page
timerDisplay.innerText = hours + ':' + minutes + ':' + seconds;
}
See a working example.
在控制台中输入命令。
问题
您有几个问题:
严重问题:
- 如果
timerDisplay
元素为空或格式不正确,脚本应自动从 0 开始而不是中断。 (NaN:NaN:NaN
) 此问题尚未修复。 - 脚本依赖于获取当前时间,所以总是从当前时间开始计算。您在脚本中遇到的问题是,在
startTimer
中,您执行了new Date(seconds+1)
,这破坏了脚本,因为在getShowTime
中,它从时间戳中减去Date()
。这已得到修复。 - 秒表暂停后继续秒表的处理应该在
startTimer
,而不是getShowTime
。已修复。
问题没那么严重
- 您现在应该使用
+ new Date()
而不是new Date().getTime()
,因为它更短。见this question。固定。 - 秒表的状态只有一个变量。在
running
和paused
之间选择。你不能同时拥有,因为它使脚本有点混乱。我相信您应该使用running
而不是paused
,只需使用!running
。未修复。 - 代替
0
和1
的running
,您应该使用true
和false
使脚本更具可读性。固定。
请尝试自己修复这些问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。