WmZilla - Webmaster and Marketplace

The Next Generation Webmaster and Trade Forum

Customizable Timer Download Button

YaBoiSmokey

New member

0

0%

Status

Offline

Posts

55

Likes

0

Rep

0

Bits

285

8

Months of Service

0%
Hello everyone, today I bring you a download button with a 20-second countdown timer for your page links. This code, made with HTML, CSS, and JavaScript, allows you to customize the timer to your liking. It is responsive and user-friendly.

HTML:
```
<button id="download-button" data-link="https://www.your-link-here.com/download" target="_blank">Download</button>
<div id="timer"></div>
<div id="loading"></div>
```

CSS:
```
#download-button {
/* Styles for download button */
}
#timer {
/* Styles for timer */
}
#loading {
/* Styles for loading */
}
@media screen and (max-width: 768px) {
#timer {
/* Adjustments for timer on smaller screens */
}
}
```

JavaScript:
```
const downloadBtn = document.getElementById('download-button');
const timer = document.getElementById('timer');
const loading = document.getElementById('loading');

downloadBtn.addEventListener('click', function() {
let timeLeft = 20;

const countdown = setInterval(function() {
if (timeLeft === 0) {
clearInterval(countdown);
// Once countdown ends, trigger download
} else {
timeLeft--;
// Update timer display
}
}, 1000);
});
```

Note: The code may not open in a pop-up window, but it will provide a notice when the link is triggered.

Demo
 

254

6,645

6,665

Top