<div dir="ltr" style="text-align: left;" trbidi="on">
<body>
<center>
<span id="countdown">You have to wait 20 econds.</span></center>
<br />
<div style="text-align: center;">
<b>Click on Download Button After Time is Over</b><br />
<br />
<br />
<a href="#" id="download_link" style="display: none;" class="buttonDownload">Download</a>
<noscript>JavaScript needs to be enabled in order to be able to download.</noscript>
<script>
(function(){
var message = "%d seconds before download link appears";
// seconds before download link becomes visible
var count = 20
var countdown_element = document.getElementById("countdown");
var download_link = document.getElementById("download_link");
var timer = setInterval(function(){
// if countdown equals 0, the next condition will evaluate to false and the else-construct will be executed
if (count) {
// display text
countdown_element.innerHTML = "You have to wait %d seconds.".replace("%d", count);
// decrease counter
count--;
} else {
// stop timer
clearInterval(timer);
// hide countdown
countdown_element.style.display = "none";
// show download link
download_link.style.display = "";
}
}, 1000);
})();
</script>
</div>
</body></div>
<style>
body {
}
.buttonDownload {
display: inline-block;
position: relative;
padding: 10px 25px;
background-color: #4CC713;
color: white;
font-family: sans-serif;
text-decoration: none;
font-size: 0.9em;
text-align: center;
text-indent: 15px;
}
.buttonDownload:hover {
background-color: #333;
color: white;
}
.buttonDownload:before, .buttonDownload:after {
content: ' ';
display: block;
position: absolute;
left: 15px;
top: 52%;
}
/* Download box shape */
.buttonDownload:before {
width: 10px;
height: 2px;
border-style: solid;
border-width: 0 2px 2px;
}
/* Download arrow shape */
.buttonDownload:after {
width: 0;
height: 0;
margin-left: 3px;
margin-top: -7px;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: transparent;
border-top-color: inherit;
animation: downloadArrow 2s linear infinite;
animation-play-state: paused;
}
.buttonDownload:hover:before {
border-color: #4CC713;
}
.buttonDownload:hover:after {
border-top-color: #4CC713;
animation-play-state: running;
}
/* keyframes for the download icon anim */
@keyframes downloadArrow {
/* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */
0% {
margin-top: -7px;
opacity: 1;
}
0.001% {
margin-top: -15px;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
margin-top: 0;
opacity: 0;
}
}</style>
Code कॉपी करके अपने ब्लॉग पोस्ट के एचटीएमएल व्यू पर क्लिक करें आपको जहां पर भी टाइमर डाउनलोड लगान है उस जगह पर past कर दे
Simple changes
- # के बदले अपना download link डाल दे