JS倒計時10秒的完整實現及應用

一、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秒鐘減去一秒鐘的時間，直到倒計時結束。同時，根據倒計時的時間來修改倒計時內容。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/233627.html