کد شمارش معکوس و فعال شدن ارسال مجدد
با سلام خدمت اساتید ...
در سایتهایی که ورود از طریق شماره همراه و وارد کردن کد تایید انجام میشه بخشی وجود داره که وقتی کاربر دکمه درخواست کد رو کلیک کرد 2 دقیقه به صورت معکوس شمارش رو انجام میده و اگر کد به هر دلیلی وارد نشد دکمه ارسال مجدد دوباره فعال میکنه
دوستان کسی کد اماده این بخش رو داره :
دو دقیقه به صورت معکوس شمارش انجام بشه و بعد از اتمام این زمان دکمه ارسال مجدد فعال بشه ؟
بفرما اینو تستش کن ببین همون هست که میخوای؟؟
<!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 بدین.
سلام و درود این کدو با جاوااسکریپت خودت هم میتونی بنویسی بنده این کارو قبال انجام دادم و فعلا از حوصله من خارجه و دسترسی هم به اون کد قبلیم ندارم . با جاواسکریپت میتونی این کارو انجام بدی.
سلام
میتونید از تابع setInterval در جاوااسکریپت استفاده کنید
سرچ کنید و نمونه های مخلفشو تو نت ببینید
متوجه ساختار و نوع استفادش میشید
موفق باشید
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';
}
}
}<div class="otp-timer">
<span class="text"> زمان باقیمانده :</span>
<span id="seconds">60</span>
<span class="dot">:</span>
<span id="minutes">4</span>
</div>اینطوری بکارش بنداز
minutes = 4;
seconds = 60;
set_inteval = setInterval( 'otp_timer()', 1000 );اینطوری هم متوفقش کن.
clearInterval(set_inteval);
document.getElementById('seconds').innerHTML = '00';
document.getElementById('minutes').innerHTML = '0';
@hosseinshirinegad98
شما کسی چاقو زیر گلوتون نزاشته که حتما جواب بدید که :)
اگه حوصله جواب دادن ندارید خب توی این سکشن سایت نیاید چرا توهین میکنید به کسی که سوال پرسیده؟؟؟؟؟؟
@hesammousavi این مدل جدیده دیگه؟
@hosseinshirinegad98 مهندس جان ممنون بابت وقتی که گزاشتی چیزی که مد نظر ما هست به این صورته که کاربر با کلیک کردن روی یک دکمه این شمارش معکوس اغاز بشه
چیزی تو این مایه ها :
<html>
<body>
<p>Click the button to wait 3 seconds, then alert "Hello".</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
setTimeout(function(){ alert("Hello"); }, 3000);
}
</script>
</body>
</html>مشکل این کد اینه که شمارش معکوس رو به کاربر نمایش نمیده و کدهای شما هم با رفرش صفحه اغاز به شمارش میکنه
حالا ان دوتا رو چجوری باید با هم ادغام کرد جای سواله ؟
@hosseinshirinegad98
اگر حوصله پاسخگوویی ندارید پس فعالیت نکنید :)
کسی مجبور به اینکار نکرده شما رو
پس به شعور بقیه احترام بزارید 😑😑
این همه سوالی که شما پرسیدید و بقیه جواب دادن اگر بقیه دوستان با این ادبیات بهتون جواب میدادن خودتون چی بهشون میگفتید !!!!
@hesammousavi جناب موسوی سوال رو من مطرح کردم بعد حوصله پاسخ به چیو ندارم
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
کدوم ادبیات !!!!😐😐😐😐😐
سلام دارم روش کار میکنم بهتون کدشومیدم. اینکه با رفرش صفحه شمارش از نو شروع میشه مقداری دانش بیشتر در زمینه js میخواد. میشه مقدارشو در یه جا مثل localStorag ذخیره کرد و دوباره هنگام refresh خوندش و ادامه شمارشو انجام داد. این مسئله زیاد مهم نیست شاید البته برای کار شما لازم باشه. تواین موقعیت اکثرا کسی صفحه رو refresh نمیکنه.
ضمن اینکه در باره پیام آقای موسوی بگم ایشون به اشتباه بجای اینکه پیامو به من بدن به شما دادن .
@hosseinshirinegad98 من فکر کنم سوالم رو درست مطرح نکردم
کدهایی که شما فرمودید اوکی هست
فقط اگه بشه با کلیک روی یک گزینه (برای مثال دکمه درخواست کد) این تایمر شروع به شمارش بکنه کار اوکی میشه
بفرما اینو تستش کن ببین همون هست که میخوای؟؟
<!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 بدین.
با سلام خدمت شما
گاهی وقتا ما منظورمونو با محبت میگیم اما چون حالت چهره و گویشمون معلوم نیست شبیه به توهین میشه @hesammousavi
ببخشید جناب من از کد شما استفاده کردم و شخصی سازیش کردم ولی نمی تونم بخش مربوط به رنگ دکمه شروع رو پیدا کنم ممنون میشم یکی راهنمایی کنه@hosseinshirinegad98
تیکه کد این رو دارید بی زحمت برام ارسال کنید ؟ میخوام بطور خودکار مثلا از یک سال ی دفعه بیاد 0 و یک سال طول بکشه این که بیاد روی 0
سلام
@hosseinshirinegad98 امکانش هست این کد رو یه تغییراتی بدید که بعد اتمام زمان سنج بنویسه زمان شما به پایان رسید خیلی ممنون