gpt4 book ai didi

javascript - 如何暂停/播放 JavaScript 倒计时时钟

转载 作者:行者123 更新时间:2023-12-03 05:18:47 25 4
gpt4 key购买 nike

我需要播放并暂停这个倒计时器,这样我就可以在暂停的特定时间恢复时钟。初始状态为播放。

  • 请注意,该按钮是空的,因为我没有导入 font-awesome 包,但它从播放切换到暂停。
  • 请使用togglePause函数来创建播放/暂停间隔执行。

我被困住了...

<强> The Fiddle.

时钟 HTML

<h1>Countdown Clock</h1>
<div id="clockdiv">
<div>
<span class="days"></span>
<div class="smalltext">Days</div>
</div>
<div>
<span class="hours">t</span>
<div class="smalltext">Hours</div>
</div>
<div>
<span class="minutes"></span>
<div class="smalltext">Minutes</div>
</div>
<div>
<span class="seconds"></span>
<div class="smalltext">Seconds</div>
</div>
</div>
<div class="container">
<div id="controls">
<h2>Pause/Continue</h2>
<button id="pause" onclick="togglePause(1);" class="pause"><span class="fa fa-pause"></span></button>

时钟JS:

function togglePause(toPause)
{
if($('#pause > span').hasClass('fa-pause')) {
$('#pause > span').addClass('fa-play').removeClass('fa-pause');
}else{
$('#pause > span').addClass('fa-pause').removeClass('fa-play');
}

}
function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}

function initializeClock(id, endtime) {
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');

function updateClock() {
var t = getTimeRemaining(endtime);

daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

if (t.total <= 0) {
clearInterval(timeinterval);
}
}

updateClock();
var timeinterval = setInterval(updateClock, 1000);
}

function setClock(hours, minutes) {

}


var days = 1;
var hours = 1;
var minutes = 0.25;
var seconds = 1;

var deadline = new Date(Date.parse(new Date()) + days*60*minutes*60*seconds*1000);
initializeClock('clockdiv', deadline);

最佳答案

尝试这个有效的播放/暂停代码:jsfiddle.net/bharatsing/1fdnho9k/7/

var timeinterval;
var t=0;

function togglePause(toPause)
{
if($('#pause > span').hasClass('fa-pause')) {
clearInterval(timeinterval);
$('#pause > span').addClass('fa-play').removeClass('fa-pause');
}else{
var deadline=new Date(Date.parse(new Date()) + t);
initializeClock('clockdiv', deadline);
$('#pause > span').addClass('fa-pause').removeClass('fa-play');
}
}

function getTimeRemaining(endtime) {
t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}

function getTimeRemainingNew(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}

function initializeClock(id, endtime) {
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');

function updateClock() {
var t = getTimeRemaining(endtime);

daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

if (t.total <= 0) {
clearInterval(timeinterval);
}
}

updateClock();
timeinterval = setInterval(updateClock, 1000);
}

function setClock(hours, minutes) {

}

$(document).ready(function(){
var days = 1;
var hours = 1;
var minutes = 0.25;
var seconds = 1;

var deadline = new Date(Date.parse(new Date()) + days*60*minutes*60*seconds*1000);

initializeClock('clockdiv', deadline);
});

关于javascript - 如何暂停/播放 JavaScript 倒计时时钟,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41484322/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com