完整的js倒计时代码,详解js倒计时功能

让我们看看如何使用 JavaScript 计时器创建倒数计时器。实际上，获取开始时间和当前时间并从那里计算差异会更准确，但现在我想使用 setInterval() 来创建它。

倒计时代码

HTML代码

<form name="timer">
	<input type="text" value=""> 分钟
	<input type="text" value="">秒<br>
	<input type="button" value="开始" onclick="cntStart()">
	<input type="button" value="停止" onclick="cntStop()">
</form>

js倒计时代码

<script>

var timer1; //声明存储计时器的变量（计时器ID）


//每隔1000毫秒调用倒计时函数的函数
function cntStart()
{
  document.timer.elements[2].disabled=true;
  timer1=setInterval("countDown()",1000);
}

//计时器停止函数
function cntStop()
{
  document.timer.elements[2].disabled=false;
  clearInterval(timer1);
}

//倒计时函数
function countDown()
{
  var min=document.timer.elements[0].value;
  var sec=document.timer.elements[1].value;
  
  if( (min=="") && (sec=="") )
  {
    alert("请设定时间！");
    reSet();
  }
  else
  {
    if (min=="") min=0;
    min=parseInt(min);
    
    if (sec=="") sec=0;
    sec=parseInt(sec);
    
    tmWrite(min*60+sec-1);
  }
}

//导出剩余时间的函数
function tmWrite(int)
{
  int=parseInt(int);
  
  if (int<=0)
  {
    reSet();
    alert("时间到了！");
  }
  else
  {
	//剩余分数将int除以60舍去
    document.timer.elements[0].value=Math.floor(int/60);
    //剩余秒数为int除以60余数
    document.timer.elements[1].value=int % 60;
  }
}

//将窗体恢复到初始状态（重置）函数
function reSet()
{
  document.timer.elements[0].value="0";
  document.timer.elements[1].value="0";
  document.timer.elements[2].disabled=false;
  clearInterval(timer1);
}  
  
</script>

倒计时效果

脚本说明

HTML表单部分：

elements[0]　文本框输入分钟
elements[1]　文本框输入秒数
elements[2]　调用开始按钮函数cntStart()
elements[3]　调用停止按钮函数cntStop()

JavaScript的第一部分

接下来我们来看一下JavaScript部分。首先声明变量timer1，在函数之外声明，这是全局变量（可用于多个函数）。将计时器存储在该timer1中，使其能够ON/OFF。

函数cntStart()

函数cntStart()首先将开始按钮设为禁止状态。然后在setInterval()中每隔1000毫秒，即每秒调用一次倒计时函数countDown()。将此计时器存储在变量timer1中。

函数cntStop()

在定时器停止函数cntStop()中，启动按钮的禁止状态被释放，在 clearInterval()中定时器被释放。但是由于表单的文本框没有被篡改，所以再次按下开始按钮会从继续开始计数。它更像是一个暂停按钮。

函数 countDown()

在函数 countDown() 的开头声明变量 min,sec 并在文本框中为分钟和秒分配值。

然后使用if 语句检查文本框中是否没有输入任何内容。 &&表示“和”（两个条件都适用）。如果两个文本框都是空的，使用alert()来提醒他们设置时间。然后调用函数reSet()恢复开始按钮并取消定时器。

如果任一文本框被填写，我们使用parseInt()将其转换为数字。如果其中一个为空，则将其保留为0。

然后它调用函数 tmWrite() 写出剩余时间。此时指定剩余秒数 - 1作为参数（分钟乘以 60 变为秒）。在这里减去 1 秒，它就会倒计时。

函数 tmWrite()

由于倒计时功能很长，所以我做了一个单独的功能来写出剩余时间。首先，使用 parseInt() 将参数转换为数字。该参数被指定为“剩余秒数 - 1”。

接下来，使用 if 语句检查此参数是否为 0 或更小。条件可能是“int==0”，但应该是0 或更小，假设从头开始输入 0 秒或负数。

如果 int 小于或等于 0，则调用函数 reSet() 将表单恢复到初始状态并停止计时器。并使用 alert() 显示“时间到了！”。

如果 int 尚未达到 0，则在文本框中显示剩余的秒数。分钟是剩余秒数除以 60 并向下取整，秒数是剩余秒数除以 60的余数。 使用“ % ”得到余数。

函数reSet()

将表单返回到其初始状态的过程在此脚本中出现了两次。因此与其一一编写，不如将其作为函数调用会更干净。作为表单初始化，执行以下处理。

• 在分数文本框中显示“0”。

• 在秒文本框中显示“0”。

• 解除启动按钮的禁止状态。

• 取消定时器