Кнопка загрузки с таймером в HTML CSS и JavaScript

Если у вас есть веб-сайт, вы можете использовать эту кнопку загрузки для загрузки файлов для пользователей. В противном случае вы можете создать эту кнопку, чтобы улучшить свои навыки кодирования в HTML, CSS и JavaScript. 

Видео пример кнопки загрузки с таймером

Чтобы создать кнопку загрузки с таймером, выполните указанные шаги построчно:

1. Создайте папку. Вы можете указать любое имя этой папки и создать в ней указанные ниже файлы.
2. Создайте файл index.html. Имя файла должно быть index и его расширение .html.
3. Создайте файл style.css. Имя файла должно быть стилем, а его расширение — .css.
4. Создайте файл script.js. Имя файла должно быть script и его расширение .js.

Сначала вставьте следующие коды в файл index.html. Если посмотреть на строку .no 15 в кодах, то там можно увидеть data-timer=”10″. Это количество секунд для работы таймера, где 10 означает, что таймер будет работать от 10 до 0 секунд. Итак, измените его в соответствии с вашими потребностями.

Пример:

HTML КОД:

<button class="download-btn" data-timer="10"> <span class="icon material-symbols-rounded">vertical_align_bottom</span> <span class="text">Download Files</span> </button>

CSS КОД:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); .download-btn{ outline: none; border: none; color: #fff; display: flex; cursor: pointer; padding: 16px 25px; border-radius: 6px; align-items: center; white-space: nowrap; background: #4A98F7; transition: all 0.2s ease; } .download-btn:hover{ background: #2382f6; } .download-btn.timer{ color: #000; background: none; transition: none; font-size: 1.6rem; pointer-events: none; } .download-btn.timer b{ color: #4A98F7; padding: 0 8px; } .download-btn .icon{ font-size: 2rem; } .download-btn .text{ font-size: 1.5rem; padding-left: 10px; }

JAVASCRIPT КОД:

const downloadBtn = document.querySelector(".download-btn"); const fileLink = "https://drive.google.com/uc?export=download&id=1aYiaLn3YOjL-_o5QBCy7tU1epqA6gZoi"; const initTimer = () => { if(downloadBtn.classList.contains("disable-timer")) { return location.href = fileLink; } let timer = downloadBtn.dataset.timer; downloadBtn.classList.add("timer"); downloadBtn.innerHTML = `Your download will begin in ${timer} seconds`; const initCounter = setInterval(() => { if(timer > 0) { timer--; return downloadBtn.innerHTML = `Your download will begin in ${timer} seconds`; } clearInterval(initCounter); location.href = fileLink; downloadBtn.innerText = "Your file is downloading..."; setTimeout(() => { downloadBtn.classList.replace("timer", "disable-timer"); downloadBtn.innerHTML = `vertical_align_bottom Download Again`; }, 3000); }, 1000); } downloadBtn.addEventListener("click", initTimer);

Если вы посмотрите на вторую строку в кодах, там есть переменная fileLink, в которой я дал ссылку на файл Google Диска. Вы должны удалить эту ссылку и вставить свою собственную ссылку для загрузки. Если вы хотите указать там ссылку на свой Google Диск, вы можете заменить этот идентификатор «1aYiaLn3YOjL…» идентификатором вашего файла.

Чтобы получить загружаемый идентификатор файла Google Диска

Чтобы получить идентификатор файла, загрузите файл на Google Диск> щелкните правой кнопкой мыши файл> нажмите «Поделиться»> «Обновить общий доступ» до «Все, у кого есть ссылка»> нажмите «Копировать ссылку»> вставьте его в блокнот. По этой ссылке вы получите идентификатор файла. URL - адрес выглядит следующим образом : https://drive.google.com/file/d/FILE-ID/view?usp=sharing _ _ _

Вот и все, теперь вы успешно создали кнопку загрузки с таймером, используя HTML CSS и JavaScript. Если вы хотите загрузить коды этой кнопки загрузки, вы можете загрузить их, нажав кнопку «Дать загрузку».