I want to create a countdown button that will show hidden text after a certain time. Here is the code about downloading files after 5 seconds.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/e48d166edc.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<title>Download Button With Timer</title>
</head>
<body>
<div class="download-container">
<a href="#" class="download-btn"> <i class="fas fa-cloud-download-alt "></i> Download Now</a>
<div class="countdown"></div>
</div>
<script type="text/javascript">
const downloadBtn = document.querySelector(".download-btn");
const countdown = document.querySelector(".countdown");
const pleaseWaitText = document.querySelector(".pleaseWait-text");
const manualDownloadText = document.querySelector(".manualDownload-text");
const manualDownloadLink = document.querySelector(".manualDownload-link");
var timeLeft = 5;
downloadBtn.addEventListener("click", () => {
downloadBtn.style.display = "none";
countdown.innerHTML = "Your download will start in <span>" timeLeft "</span> seconds." //for quick start of countdown
var downloadTimer = setInterval(function timeCount() {
timeLeft -= 1;
countdown.innerHTML = "Your download will start in <span>" timeLeft "</span> seconds.";
if(timeLeft <= 0){
clearInterval(downloadTimer);
pleaseWaitText.style.display = "block";
let download_href = "Testfile.rar"; //enter the downlodable file link here
window.location.href = download_href;
manualDownloadLink.href = download_href;
setTimeout(() => {
pleaseWaitText.style.display = "none";
manualDownloadText.style.display = "block"
}, 4000);
}
}, 1000);
});
</script>
</body>
</html>Now I want to change it to a button, which will show a text after 5 minutes and can be put in WordPress post, but I don't know how to do it. Please help me.
CodePudding user response：
I know nothing of WordPress and what you can and cannot do in terms of placing a button within a post but the creation of a countdown button is fairly straightforward. The code below can be used for multiple downloads by changing the value assign to the _URL constant.
const d=document;
const q=(e,n=d)=>n.querySelector(e);
const _TIME=5;
const _URL='http://www.example.com/downloads/Testfile.rar';
const _MULTIPLIER=60; // 1 minute - 60 seconds
const createlink=(e,url)=>{
q(e).innerHTML=`<a href="${url}" download="${url}">${url}</a>`;
};
const clickhandler=function(e){
(function( time, url ){
var t=NaN;
(function(){
bttn.innerHTML=`Your download will start in <span>${time}</span> seconds.`;
t=setTimeout( arguments.callee, 1000 );
if( time <= 0 ){
clearTimeout( t );
// modify the button and remove original event listener
bttn.innerHTML=url;
bttn.removeEventListener('click',clickhandler);
bttn.setAttribute('download',url);
bttn.onclick=(e)=>window.location.href=url;
// could easily set "location.href=url;" here
// rather than assigning a new click event to
// the button if automatic download is required.
createlink('#manual',url);
}
time--;
})();
})( _TIME * _MULTIPLIER, _URL );
};
let bttn=q('.download-container button');
bttn.addEventListener('click',clickhandler);#manual{
margin:1rem 0;
}<div class="download-container">
<button>Download Now</button>
</div>
<div id='manual'></div>CodePudding user response：
Here is the code to put in wordpress, it will display text after click and wait for a few seconds. But I don't know why it doesn't work.
This code is used for the button
<div id="references40" code-ref="ref51" countdown="8" style="text-align: center; font-weight: 600;"> BUTTON CHỈ HIỆN MẬT KHẨU KHI TÌM TỪ KHÓA "SHARE COOKIES NETFLIX" TRÊN GOOGLE </div>This code is put in the body of wordress
<script type = "text/javascript" >
var referrer = document.referrer;
ifm_list_browser = ['google.com', 'google.com.vn'];
function checkFefer(f, e) {
var i = 0;
for (i = 0; i < e.length; i ) {
if (f.indexOf(e[i]) > -1) return true;
}
return false;
}
let stores = {
'ref48': 'ký tự đặc biệt',
'ref49': 'các bạn có thể chèn số 122344',
'ref50': 'đây là demo vui vẻ',
'ref51': '343596',
}
var flagref = checkFefer(referrer, ifm_list_browser)
if (flagref) {
var html = '<p style="text-align:center;"><button style="background: #e81e1e;border-radius: 10px;border:none;color: #ffffff;width: 59%;padding: 10px 0;text-transform: uppercase;font-weight: bold;font-size: 16px;outline: none; cursor: pointer;" id="countDown40" get-code="true" onclick="startcountdown(); this.onclick=null;">Lấy mã bảo mật</button></p>';
jQuery(document).ready(function($) {
$("#references40").empty();
html = $.parseHTML(html);
$("#references40").append(html);
});
}
function startcountdown() {
document.getElementById('countDown40').setAttribute("style", "background: #0b1df5;border-radius: 10px;border:none;color: #ffffff;width: 59%;padding: 10px 0;text-transform: uppercase;font-weight: bold;font-size: 16px;outline: none; cursor: pointer;");
let cNode = jQuery("#references40");
let cKey = cNode.attr('code-ref');
let cCount = cNode.attr('countdown');
let counter = parseInt(cCount) || 40;
var countdownCode = setInterval(function() {
counter--;
document.getElementById('countDown40').innerHTML = 'Mã bảo mật sẽ hiện sau ' counter ' giây' ' bạn nhé';
if (counter == 0) {
document.getElementById('countDown40').innerHTML = `Mã bảo mật của bạn là: ${stores[cKey]}`;
document.getElementById('countDown40').setAttribute("style", "background: #ea3b7b;border-radius: 10px;border:none;color: #ffffff;width: 59%;padding: 10px 0;text-transform: uppercase;font-weight: bold;font-size: 16px;outline: none; cursor: pointer;");
clearInterval(countdownCode);
return false;
}
}, 1000);
}
</script>