JS倒计时10秒的完整实现及应用

发布时间：2023-05-17

一、JS倒计时10秒按钮

倒计时10秒是我们在日常开发中常见的需求之一。比如，在某些场景下需要让用户限定在10秒内进行操作，那么我们就可以通过实现JS倒计时来实现。以下是一个简单的例子，实现了倒计时10秒的功能。

<!-- HTML部分 -->
<button onclick="countdown(10)">倒计时10秒</button>

// JS部分
function countdown(time) {
  var btn = document.getElementsByTagName("button")[0];
  btn.disabled = true;
  btn.style.background = "#ccc";
  var timer = setInterval(function() {
    time--;
    btn.innerHTML = "倒计时" + time + "秒";
    if (time === 0) {
      clearInterval(timer);
      btn.disabled = false;
      btn.style.background = "";
      btn.innerHTML = "重新发送";
    }
  }, 1000);
}

当点击按钮时，倒计时会开始，按钮的disabled属性会被赋值为true，防止多次点击；同时，按钮的背景颜色也会变灰，以给用户一个倒计时时间内无法操作的提示。每一秒钟，时间会减去1s，直到时间为0时，计时器会被清除，按钮的disabled属性被解除，背景颜色被恢复成默认状态，同时按钮显示“重新发送”。

二、JS倒计时10秒再点击按钮

有时候，用户可能没有在倒计时时间内完成操作，但是我们又不希望用户等待完整的倒计时时间，可以添加一个再次点击按钮的功能。即，在倒计时过程中，如果再次点击按钮，则重新开始一个倒计时。

<!-- HTML部分 -->
<button onclick="countdownTwo(10)">倒计时10秒再次点击</button>

// JS部分
var timerTwo;
function countdownTwo(time) {
  var btn = document.getElementsByTagName("button")[0];
  btn.disabled = true;
  btn.style.background = "#ccc";
  clearInterval(timerTwo);
  timerTwo = setInterval(function() {
    time--;
    btn.innerHTML = "倒计时" + time + "秒";
    if (time === 0) {
      clearInterval(timerTwo);
      btn.disabled = false;
      btn.style.background = "";
      btn.innerHTML = "重新发送";
    }
  }, 1000);
}

这里增加了一个clearInterval函数，用于在再次点击按钮时清除上一个计时器。这样，即使用户在倒计时时间内再次点击了按钮，也不会出现计时器重叠或多次点击的问题。

三、JS倒计时10秒代码

实现倒计时的核心代码如下：

var timer;
function countdown(time) {
  var btn = document.getElementsByTagName("button")[0];
  btn.disabled = true;
  btn.style.background = "#ccc";
  clearInterval(timer);
  timer = setInterval(function() {
    time--;
    btn.innerHTML = "倒计时" + time + "秒";
    if (time === 0) {
      clearInterval(timer);
      btn.disabled = false;
      btn.style.background = "";
      btn.innerHTML = "重新发送";
    }
  }, 1000);
}

倒计时时间是通过设置time来实现的，同时用setInterval函数来循环执行倒计时操作。每一秒钟，time减去1s，同时修改按钮的innerHTML，直到time倒计时结束。

四、JS倒计时10秒可暂停

在某些情况下，倒计时时间可能较长，需要给用户提供暂停功能。以下是一个实现倒计时暂停的例子：

<!-- HTML部分 -->
<button onclick="stopCountdown()">暂停</button>
<button onclick="resumeCountdown()">恢复</button>
<button onclick="resetCountdown(10)">重置</button>

// JS部分
var timer;
var time;
function countdown(timeOut) {
  time = timeOut;
  var btn = document.getElementsByTagName("button")[0];
  btn.disabled = true;
  btn.style.background = "#ccc";
  clearInterval(timer);
  timer = setInterval(function() {
    time--;
    btn.innerHTML = "倒计时" + time + "秒";
    if (time === 0) {
      clearInterval(timer);
      btn.disabled = false;
      btn.style.background = "";
      btn.innerHTML = "重新发送";
    }
  }, 1000);
}
function stopCountdown() {
  clearInterval(timer);
}
function resumeCountdown() {
  timer = setInterval(function() {
    time--;
    var btn = document.getElementsByTagName("button")[0];
    btn.innerHTML = "倒计时" + time + "秒";
    if (time === 0) {
      clearInterval(timer);
      btn.disabled = false;
      btn.style.background = "";
      btn.innerHTML = "重新发送";
    }
  }, 1000);
}
function resetCountdown(timeOut) {
  clearInterval(timer);
  time = timeOut;
  var btn = document.getElementsByTagName("button")[0];
  btn.innerHTML = "倒计时" + timeOut + "秒";
  btn.disabled = false;
  btn.style.background = "";
}

这里增加了三个新的函数，分别是暂停、恢复和重置。当执行暂停操作时，需要清除计时器；恢复操作时，需要重新调用倒计时函数；重置操作时，需要清除计数器、重新设置计时时间和按钮状态。

五、JS倒计时10秒广告代码

倒计时广告是在某些场景下经常使用的一种形式。比如广告倒计时、秒杀活动等。以下是一个倒计时广告的实现例子：

<!-- HTML部分 -->
<div id="ad">
  <img src="ad.jpg">
  <div id="countdown">10秒后跳过</div>
</div>

// JS部分
var timer;
var timeout = 10;
function countdown() {
  var countdownBox = document.getElementById("countdown");
  timer = setInterval(function() {
    timeout--;
    if (timeout === 0) {
      clearInterval(timer);
      ad.style.display = "none";
    }
    countdownBox.innerHTML = timeout + "秒后跳过";
  }, 1000);
}
var ad = document.getElementById("ad");
ad.onclick = function() {
  ad.style.display = "none";
  clearTimeout(timer);
}
countdown();

假设我们有一个广告盒子，我们在广告盒子内部放置一张图片ad.jpg，并在盒子下方放置了一个计时器。当点击广告时，广告会被隐藏，计时器也会被清除。如果用户没有在10秒内点击广告，则广告会在10秒后自动隐藏。

六、JS倒计时10秒刷新二维码

二维码是我们日常生活中常见的一种形式，使用倒计时功能可以实现自动刷新二维码的效果。以下是一个刷新二维码的例子：

<!-- HTML部分 -->
<div id="qrcode"></div>
<button onclick="refresh()">刷新二维码</button>

// JS部分
var qrcode = new QRCode("qrcode");
function refresh() {
  qrcode.clear(); //清除QRCode
  qrcode.makeCode("new content"); //重新生成QRCode
  countdown(10); //开始倒计时
}

这里使用了QRCode.js库来生成二维码，当点击刷新按钮时，会先清除当前的QRCode，并重新生成一个新的QRCode。同时，开始倒计时10秒。

七、JS倒计时10秒提交按钮

有时候，在一些关键操作场景下，我们需要防止多次提交，可以通过倒计时来实现。以下是一个防止多次提交的案例。

<!-- HTML部分 -->
<button id="submit">提交</button>

// JS部分
var submitting = false; //是否正在提交
var timer;
var time = 10;
var btn = document.getElementById("submit");
btn.onclick = function() {
  if (!submitting) {
    submitting = true;
    btn.disabled = true;
    btn.style.background = "#ccc";
    clearInterval(timer);
    timer = setInterval(function() {
      time--;
      btn.innerHTML = "倒计时" + time + "秒";
      if (time === 0) {
        clearInterval(timer);
        submitting = false;
        btn.disabled = false;
        btn.style.background = "";
        btn.innerHTML = "提交";
        time = 10;
      }
    }, 1000);
  }
}

当开始提交时，submitting变量被赋值为true，并禁用按钮。同时，开启一个10秒的倒计时。如果倒计时完成后，submitting变量被赋值为false，同时启用按钮，并将按钮状态回归初始状态。如此，我们可以进行多次提交，并通过倒计时来避免多次提交问题。

八、JS倒计时10秒代码实验报告

综上所述，JS倒计时10秒是我们日常开发中经常需要实现的功能，其实现方法可以有很多种，以上通过代码示例的方式阐述了倒计时10秒的基本实现方式，以及场景应用。总而言之，倒计时10秒是一种非常实用的交互方式，可以帮助我们完成很多常见的交互效果。

九、JS倒计时60秒页面显示

如果需要实现60秒倒计时，只需要简单地改变一下time的值即可。在HTML部分，需要简单地修改一下按钮文字即可。

<!-- HTML部分 -->
<button onclick="countdown(60)">倒计时60秒</button>

// JS部分
function countdown(time) {
  var btn = document.getElementsByTagName("button")[0];
  btn.disabled = true;
  btn.style.background = "#ccc";
  var timer = setInterval(function() {
    time--;
    btn.innerHTML = "倒计时" + time + "秒";
    if (time === 0) {
      clearInterval(timer);
      btn.disabled = false;
      btn.style.background = "";
      btn.innerHTML = "重新发送";
    }
  }, 1000);
}

以上仅是一个简单的例子，其他实现方式也可以根据需要灵活调整。

十、嵌入式倒计时10秒代码

在某些场景下，我们需要在一个网页或者应用中嵌入一个倒计时功能，以下是一个实现嵌入式倒计时的例子。

<!-- HTML部分 -->
<div id="countdown"></div>

// JS部分
var timeout = 10;
var countdownBox = document.getElementById("countdown");
var timer = setInterval(function() {
  timeout--;
  if (timeout === 0) {
    clearInterval(timer);
    countdownBox.innerHTML = "倒计时结束";
  } else {
    countdownBox.innerHTML = "倒计时" + timeout + "秒";
  }
}, 1000);

以上代码会在页面中嵌入一个countdown的div，用于显示倒计时时间。通过setInterval函数，每隔1秒钟减去一秒钟的时间，直到倒计时结束。同时，根据倒计时的时间来修改倒计时内容。

推荐文章