5
<!-- Tombol Get File Awal -->
<div style="text-align:center; margin-top:50px;">
<a id="getFileBtn" href="javascript:void(0);"
style="padding:15px 30px; background:#4caf50; color:#fff;
text-decoration:none; border-radius:8px; font-size:20px;">Get File</a>
</div>
<!-- Countdown Fullscreen -->
<div id="fullscreenCountdown"
style="position:fixed; top:0; left:0; width:100%; height:100%;
display:none; justify-content:center; align-items:center;
background:#000; color:#fff; font-size:100vw; font-weight:bold; z-index:9999;">
5
</div>
<!-- Tombol Download -->
<div style="text-align:center; margin-top:50px;">
<a id="downloadBtn" href="https://example.com/file.zip"
style="display:none; padding:15px 30px; background:#2196F3; color:#fff;
text-decoration:none; border-radius:8px; font-size:20px;">Download</a>
</div>
<script>
let duration = 5; // durasi countdown
let elapsed = 0;
let getFileBtn = document.getElementById('getFileBtn');
let countdownDiv = document.getElementById('fullscreenCountdown');
let downloadBtn = document.getElementById('downloadBtn');
getFileBtn.addEventListener('click', function() {
// Sembunyikan tombol Get File
getFileBtn.style.display = "none";
// Tampilkan countdown fullscreen
countdownDiv.style.display = "flex";
countdownDiv.innerText = duration;
elapsed = 0;
let interval = setInterval(() => {
elapsed++;
countdownDiv.innerText = duration - elapsed;
if(elapsed >= duration){
clearInterval(interval);
countdownDiv.style.display = "none"; // sembunyikan countdown
downloadBtn.style.display = "inline-block"; // tampilkan tombol download
}
}, 1000);
});
</script>
No comments:
Post a Comment