how to set time on download link

আসসালামু আলাইকুম। হাই বন্ধুরা কেমন আছেন আসা করি সবাই আল্লাহর মতে ভালো আছেন। অনেক দিন পর আবারও আপনাদের মাঝে হাজির হলাম নতুন একটি টপিক নিয়ে। আজকের টপিকটি হল- যেভাবে ডাউনলোড বাটনে টাইম সেট করবেন! মানে ডাউনলোড বাটনে ডাউনলোড করার জন্য ক্লিক করলে তখন নিদিষ্ট একটা টাইম থেকে কাউন্টডাউন শুরু হবে এবং কাউন্টডাউন শেষ হলে ডাউনলোড শুরু হবে /ডাউনলোডের লিংকে ঢুকবে। মোট কথা ডাউনলোড বাটনে আপনি যদি 15সেকেন্ড সেট করেন তাহলে ওই বাটনে ক্লিক করলে 15সেকেন্ড সময় পর এই বাটনের লিংকে কাজ করবে। তাহলে চলো বেশি কথা না বাড়িয়ে ডাউনলোড বাটনে টাইম সেট করে ফেলি।

যেভাবে ডাউনলোড বাটনে টাইম সেট করবেন?

আমরা এখানে ডাউনলোড বাটন তৈরি এবং টাইম সেট করার জন্য html,css,javascript ব্যবহার করব।

ডাউনলোড বাটনে html এর ব্যবহার

প্রথমে আমরা html দিয়ে ডাউনলোড বাটন তৈরি করি।

<style type="text/css">
/* css code here*/
</style>
<center><span onclick="interval = setInterval(countnum, 1000);"id="count">download</span></center>
<center id="s-link"></center>
<a href="http://www.google.com" id="li"style="display:none;" >Google</a>

<script type="text/javascript">//javascript code here<script>

এখানে আমরা কন্টেন্ট গুলো ওয়েবপেজের মাঝখানে প্রদর্শন করার জন্য <center>...</center> ট্যাগ ব্যবহার করেছি। তারপর <center>ট্যাগের মধ্যে <span> ট্যাগ ব্যবহার করেছি যা ওয়েবপেজে ডাউনলোড বাটন হিসাবে থাকবে। তারপর আবার <center> ব্যবহার করেছি এবং এর মধ্যে এট্রিবিউট হিসাবে id="s-link" ব্যবহার করেছি, যার কাজ হল যখন ডাউনলোড বাটনে ক্লিক করবেন তখন এই id="s-link" ব্যবহার করে javascript এর মাধ্যমে ওয়েবপেইজে কাউন্টডাউন প্রদর্শিত হবে। তারপর শেষে লিংকের <a>... </a>ট্যাগ ব্যবহার করেছি যা প্রথম অবস্থায় ওয়েবপেইজে প্রদর্শিত হবে না কিন্তু ডাউনলোড বাটনে ক্লিক করার পর <center id="s-link">এখানে কাউন্টডাউন প্রদর্শন হবে</center> তারপর যখন কাউন্টডাউন শেষ হবে তখন <a>... </a> এই লিংকে অটোমেটিক ক্লিক হবে।

ডাউনলোড বাটনে css এর ব্যবহার

এখন আমরা css ব্যবহার করব।

<style type="text/css">
center{
margin:30px;
}
center span{
padding:10px 30px;
font-size:17px;
font-weight:bold;
text-transform:uppercase;
background:#299fff;
color:white;
transition:1s;
border-radius:50px;
box-shadow:0 0 15px rgba(0,0,0,1);
}
center span:active{
transition:0s;
background:#ffffff;
border:1px solid black ;
border-radius:50px;
color:black;
}
</style>

output

download Google

html and css ব্যবহার করাতে উপরের মতো output প্রদর্শন হবে।

ডাউনলোড বাটনে javascript এর ব্যবহার

এখন আমরা ব্যবহার করব javascript যার মাধ্যমে এই প্রজেক্টটির প্রাণ দিব।

	<script type="text/javascript">
var coun = document.getElementById("count");
var link = document.getElementById("li");
var slink = document.getElementById("s-link");
var countdown = 16;
function countnum(){
countdown--;
coun.style.display="none";
slink.innerHTML="wait "+countdown+" second then download autocratically";
if(countdown=="0")
{
var stopinterval = clearInterval(interval);
coun.innerHTML="";
window.location.assign(link)
}
}
</script>

javascript যোগ করার পর আপনার কাজ শেষ। এখন পুরো প্রজেক্টের কোড এবং প্রজেক্টের পরিক্ষা করার পালা আপনি নিচে ডাউনলোড বাটনে ক্লিক করে দেখতে পরেন।

<style type="text/css">
center{
margin:30px;
}
center span{
padding:10px 30px;
font-size:17px;
font-weight:bold;
text-transform:uppercase;
background:#299fff;
color:white;
transition:1s;
border-radius:50px;
box-shadow:0 0 15px rgba(0,0,0,1);
}
center span:active{
transition:0s;
background:#ffffff;
border:1px solid black ;
border-radius:50px;
color:black;
}
</style>
<center><span onclick="interval = setInterval(countnum, 1000);"id="count">download</span></center>
<center id="s-link"></center>
<a href="https://instructiv.blogspot.com" id="li"style="display:none;" >insrtuctiv</a>

<script type="text/javascript">
var coun = document.getElementById("count");
var link = document.getElementById("li");
var slink = document.getElementById("s-link");
var countdown = 16;
function countnum(){
countdown--;
coun.style.display="none";
slink.innerHTML="wait "+countdown+" second then download autocratically";
if(countdown=="0")
{
var stopinterval = clearInterval(interval);
coun.innerHTML="";
window.location.assign(link)
}
}
</script>

download insrtuctiv

আসা করি উপরের লিংকটি সঠিকভাবে কাজ করবে। যদি কাজ করে তাহলে আপনাদের বন্ধুদের সাথে শেয়ার করবেন হে আর অবশ্য কমেন্ট করে জানাবেন। আপনারা যদি এইরকম আর ইন্টারেস্টিং টপিক পেতে চান তাহলে অবশ্য আমাদের এই সাইটে নিয়মিত ভিজিটিং করবেন।তো আজকের মতো এখানে শেষ করছি সবাই ভালো থাকবেন সুস্থ থাকবেন। ধন্যবাদ সবাইকে।