1. ホーム
2. パソコン
3. javascript

【javascript】クリックするとN秒後にダウンロードが開始されるダウンロードボタンの実装

投稿日 : 2022年12月05日 更新日 :

やりたいこと

HTML

<button class="download-btn" data-timer="5"> <!-- ここでは5秒でセット -->
  <span class="icon material-symbols-rounded">vertical_align_bottom</span>
  <span class="text">ファイルをダウンロード</span>
</button>

参考

【javascript】data属性とは？datasetで、取得、更新、追加する方法

Google Fonts Material Symbols アイコンをウェブで表示する方法

CSS

展開

.download-btn {
  display: flex;
  align-items: center;
  background: orange;
  padding: .5rem 1rem;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  border: none;
  border-radius: 8px;
  color: #fff;
  text-shadow: 1px 1px 3px #333;
  cursor: pointer;
  transition: all 0.3s ease;
}
.download-btn:hover {
  transform: translateY(-15px);
  color: orange;
  background: #fff;
  border: 1px solid orange;
}
.download-btn .icon {
  font-size: 2rem;
}
.download-btn .text {
  font-size: 1.5rem;
  padding-left: 10px;
}
.download-btn.timer {
  color: #000;
  background: #fff;
  box-shadow: none;
  font-size: 1.6rem;
  pointer-events: none;
}
.download-btn.timer strong {
  color: orange;
  padding: 0 8px;
}

javascript

展開

const downloadBtn = document.querySelector(".download-btn");

const fileLink = "https://gxy-life.com/images/PC DESK.jpg";  // ダウンロードするファイルのリンク

const countTimer = () => {
  if (downloadBtn.classList.contains("disable-timer")) {
    return (location.href = fileLink);
  }

  let timer = downloadBtn.dataset.timer;  //data属性の数字をtimerに格納
  downloadBtn.classList.add("timer");
  downloadBtn.innerHTML = `ダウンロードまであと <strong>${timer}</strong> 秒`;

  const initCounter = setInterval(() => {  // 1秒ごとカウントダウン
    if (timer > 0) {
      timer--;
      return (downloadBtn.innerHTML = `ダウンロードまであと <strong>${timer}</strong> 秒`);
    }

    clearInterval(initCounter); // timerが0になったらsetIntervalを停止
    location.href = fileLink;
    downloadBtn.textContent = "ダウンロード中...";

    setTimeout(() => {
      downloadBtn.classList.replace("timer", "disable-timer");
      downloadBtn.innerHTML = `<span class="icon material-symbols-rounded">vertical_align_bottom</span>
  <span class="text">もう一度ダウンロード</span>`;
    }, 3000);
  }, 1000);
};

downloadBtn.addEventListener("click", countTimer);

参考

【javascript】setIntervalと、それを停止させるclearIntervalの使い方

まとめ