如何在javascript代碼中執行onclick方法-有解無憂

我想在 5 秒計時器消失并啟用第二個按鈕后執行 onclick 事件..這是我的代碼。

<a href="#" id="downloadvideo" onclick="OpenInNewTab();" class="btn btn-primary btn-lg">Download Video</a>

Javascript代碼

<script>
var towait = 5;
var selector = "#downloadvideo";

function counter() {
  if (towait == 0) {
    $(selector).text("Start Download");
    var srclink = '<?= $url;?>';
    $(selector).attr('href', srclink).prop('href', srclink).prop('disabled', false);
    return;
  }
  $(selector).text("Wait "   towait   " s").prop('disabled', true);
  towait--;
  setTimeout(counter, 1000);
}
$(selector).one('click', function(e) {
  counter();
  return false;
});
</script>

uj5u.com熱心網友回復：

嘗試將 setInterval 和 clearInterval 函式添加到您的代碼中。下面是一個簡單的 10 秒計時器，只是為了演示。為了全面披露，并非所有代碼都是我自己的，我從這個答案中復制了其中的一些代碼。

var timeleft = 10; 

var b = document.querySelector('#btn');

b.addEventListener('click', () => {
var downloadTimer = setInterval(function(){
  if(timeleft <= 0){
    clearInterval(downloadTimer);
  }
  document.getElementById("progressBar").value = 10 - timeleft;
  timeleft -= 1;
}, 1000);
});

input[type='number'] {
    border: 0;
    font-size: 15px;
}

input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div>
    <button id='btn'>Click</button>
    <input type='number' value="0" max="10" id="progressBar"></input>
  </div>
</body>
</html>

uj5u.com熱心網友回復：

你可以做這樣的事情。只需將DownloadVideo功能更新為按下“開始下載”按鈕時需要執行的操作。

let waitTime = 5 // Time to wait in seconds before download is available

const selector = document.getElementById('downloadvideo')

selector.onclick = () => {
  selector.textContent = 'Wait '   waitTime   ' s'
  selector.disabled = true
  const inter = setInterval(() => {
    waitTime--
    if (waitTime == 0) {
      clearInterval(inter)
      selector.textContent = 'Start Downloading'
      selector.disabled = false
      selector.onclick = DownloadVideo
    } else {
      selector.textContent = 'Wait '   waitTime   ' s'
    }
  }, 1000)
}

function DownloadVideo() {
  // DO SOMTHING
}

<button id="downloadvideo" class="btn btn-primary btn-lg">
      Download Video
    </button>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/339787.html

標籤：javascript 点击

上一篇：在反應中-將陣列從子組件更新為父組件

下一篇：在反應中過濾物件陣列不起作用