Javascript 倒计时它不适用于单击按钮
我有一个简单的问题。我想让这段代码与重置时间按钮一起工作,当时间从30分钟开始时,删除(你准备好了!)并开始时间Javascript 倒计时它不适用于单击按钮,javascript,html,Javascript,Html,我有一个简单的问题。我想让这段代码与重置时间按钮一起工作,当时间从30分钟开始时,删除(你准备好了!)并开始时间 var seconds = 30; function secondPassed() { var minutes = Math.round((seconds - 30) / 60); var remainingSeconds = seconds % 60; if (remainingSeconds < 10) { remainingSeconds = &
var seconds = 30;
function secondPassed() {
var minutes = Math.round((seconds - 30) / 60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
if (seconds == 0) {
clearInterval(countdownTimer);
document.getElementById('countdown').innerHTML = "You are Ready!";
} else {
seconds--;
}
}
var countdownTimer = setInterval('secondPassed()', 1000);
var秒=30;
函数secondPassed(){
var分钟=数学轮((秒-30)/60);
var剩余秒数=秒数%60;
如果(剩余秒数<10){
剩余秒数=“0”+剩余秒数;
}
document.getElementById('countdown')。innerHTML=minutes+“:”+remainingSeconds;
如果(秒==0){
清除间隔(倒计时);
document.getElementById(“倒计时”).innerHTML=“准备好了!”;
}否则{
秒--;
}
}
var countdownTimer=setInterval('secondPassed()',1000);
我创建了一个新功能来重置秒数并重新启动计时器,并将其链接到按钮。在js代码的开头,我还隔离了一些变量,这些变量将计算秒数并保存对间隔的引用 这就是你要找的吗
var秒;
var倒计时;
函数startTimer(){
如果(!秒| |秒==0){
秒=30;
清除间隔(倒计时);
倒计时=设置间隔(秒通过,1000)
第二次通过();
}
}
函数secondPassed(){
var分钟=数学轮((秒-30)/60);
var剩余秒数=秒数%60;
如果(剩余秒数<10){
剩余秒数=“0”+剩余秒数;
}
document.getElementById('countdown')。innerHTML=minutes+“:”+remainingSeconds;
如果(秒==0){
清除间隔(倒计时);
document.getElementById(“倒计时”).innerHTML=“准备好了!”;
}否则{
秒--;
}
}
startTimer()代码>
此处创建一个单独的功能,单击后-它将禁用按钮、设置计时器并更改按钮文本
在secondPassed
方法中,如果seconds==0
,它将启用该按钮,以便您可以再次开始倒计时
var秒=30;
var倒计时;
函数secondPassed(){
var分钟=数学轮((秒-30)/60);
var剩余秒数=秒数%60;
如果(剩余秒数<10){
剩余秒数=“0”+剩余秒数;
}
document.getElementById('countdown')。innerHTML=minutes+“:”+remainingSeconds;
如果(秒==0)
{
清除间隔(倒计时);
document.getElementById('reset')。disabled=false;
document.getElementById(“倒计时”).innerHTML=“准备好了!”;
}否则
{
秒--;
}
}
函数start(){
秒=30;
document.getElementById('reset').innerHTML=“reset”;
document.getElementById('reset').disabled=true;
倒计时=设置间隔('secondPassed()',1000);
}
//待命
start()代码>
开始
让我们假设一些非常基本的情况,例如:
00:00
重置
下面是一个方法,你可以采取,充分评论
//我们将从获取两个元素引用开始
常量标签=document.querySelector(“div”);
const button=document.querySelector(“按钮”);
//接下来,我们将绑定按钮的单击处理程序
按钮。addEventListener(“单击”,()=>{
//当用户单击按钮时,我们将设置时间
//限制在30分钟内,然后继续
设定时器=60*30;
//禁用该按钮以防止再次单击
button.disabled=true;
button.dataset.default=button.textContent;
button.textContent=“现在倒计时!”;
//让我们设置一些每秒执行的代码
button.interval=setInterval(()=>{
//这个小数点将是一个类似于29.9521的数字
常量十进制=计时器/60;
//我们将29.9521转换为29,持续29分钟
const wholeMinute=数学楼层(十进制);
//下一步,我们取.9521乘以60秒
常数整秒=数学四舍五入(60*(十进制-整分钟));
//我们将填充这两个数字,以便它们始终有一个前导0
常量lblMin=wholeMinute.toString().padStart(2,0);
const lblSec=whistsecond.toString().padStart(2,0);
//只要我们没有时间
如果(计时器>=0){
//将计时器缩短1秒
定时器=定时器-1;
//并在标签元素上打印新标签
label.textContent=`${lblMin}:${lblSec}`;
//然后返回,这样我们就不会执行接下来的操作
返回;
}
//如果我们跑了这么远,我们的计时器就没了
//从启用按钮开始
button.disabled=false;
//还原按钮的原始文本
button.textContent=button.dataset.default;
//并清除我们的间隔,因为它不再需要
clearInterval(按钮间隔);
//我们的间隔将每秒“滴答”一次(1000毫秒)
}, 1000);
});
因此,默认情况下,计时器为00:00,复位按钮启用。单击“重置”时,计时器变为30:00并开始倒计时。当计时器在12:34,您单击“重置”时,计时器会跳回到30:00?我的意思是当30分钟的时间到期并显示消息“you are Ready!”!当我按下重置时间按钮时。删除(你准备好了!)时间重新开始当计时器滴答作响时,按钮是否应该被禁用?@Sampson是的,我想禁用按钮。它只在时间结束时工作重置按钮并不总是可见它只是在计时器启动时消失,您希望它在计时器运行时始终可见吗?
<span id="countdown" class="timer">
<a href="#container" onclick="secondPassed()">Reset time</a>