حل شده
کد شمارش معکوس و فعال شدن ارسال مجدد
با سلام خدمت اساتید ...
در سایتهایی که ورود از طریق شماره همراه و وارد کردن کد تایید انجام میشه بخشی وجود داره که وقتی کاربر دکمه درخواست کد رو کلیک کرد 2 دقیقه به صورت معکوس شمارش رو انجام میده و اگر کد به هر دلیلی وارد نشد دکمه ارسال مجدد دوباره فعال میکنه
دوستان کسی کد اماده این بخش رو داره :
دو دقیقه به صورت معکوس شمارش انجام بشه و بعد از اتمام این زمان دکمه ارسال مجدد فعال بشه ؟
ثبت پرسش جدید
پاسخ‌ها
21بهترین پاسخ
بفرما اینو تستش کن ببین همون هست که میخوای؟؟
<!DOCTYPE html>
<html lang="en">
<head>
<title>Timer</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
body{
text-align: right;
direction: rtl;
}
.btn-start-timer{
text-align: center;
margin-top: 300px;
}
.otp-timer{
margin-top: 30px;
font-family: tahoma;
background-color: #eee;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.otp-timer span{
margin-left: 5px;
}
#minutes, #seconds{
padding: 6px;
max-width: 30px;
border-radius: 3px;
background-color: green;
color:white;
}
button{
background: #e80dbc;
color: #040b04;
padding: 10px;
border: none;
border-radius: 10px;
cursor: pointer;
}
button:hover{
background-color: green;
color: white;
}
</style>
</head>
<body>
<div class="btn-start-timer">
<button onclick="startTimer()" >شروع</button>
</div>
<div class="otp-timer">
<span class="text"> زمان باقیمانده :</span>
<span id="seconds">00</span>
<span class="dot">:</span>
<span id="minutes">0</span>
</div>
</body>
</html>
<script>
var minutes;
var seconds;
var set_inteval;
function otp_timer() {
seconds -= 1;
document.getElementById('seconds').innerHTML = seconds;
document.getElementById('minutes').innerHTML = minutes;
if (seconds == 0) {
if (minutes > 0) {
seconds = 60;
minutes -= 1;
} else {
minutes = 0;
document.getElementById('minutes').innerHTML = minutes;
clearInterval(set_inteval);
minutes = 0;
seconds = 0;
document.getElementById('seconds').innerHTML = '00';
document.getElementById('minutes').innerHTML = '0';
}
}
}
function startTimer() {
minutes = 3;
seconds = 60;
document.getElementById('seconds').innerHTML = seconds;
document.getElementById('minutes').innerHTML = minutes;
set_inteval = setInterval( 'otp_timer()', 1000 );
}
</script>البته استایل های css هیچ تاثیری در کار این شمارنده نداره و میتونی همشونو کالا پاک کنی.
این شمارنده روی 4 دقیقه گذاشته شده برای شمارش دلخوا کافیه عدد دقیقه رو به متغییر minutes بدین.
گفتگوهای مرتبط
شاید پاسخ شما همین‌جا باشد