grandfather

3 سال پیش توسط grandfather مطرح شد

کد شمارش معکوس و فعال شدن ارسال مجدد

با سلام خدمت اساتید ...
در سایتهایی که ورود از طریق شماره همراه و وارد کردن کد تایید انجام میشه بخشی وجود داره که وقتی کاربر دکمه درخواست کد رو کلیک کرد 2 دقیقه به صورت معکوس شمارش رو انجام میده و اگر کد به هر دلیلی وارد نشد دکمه ارسال مجدد دوباره فعال میکنه
دوستان کسی کد اماده این بخش رو داره :
دو دقیقه به صورت معکوس شمارش انجام بشه و بعد از اتمام این زمان دکمه ارسال مجدد فعال بشه ؟

ثبت پرسش جدید

حسین شیری نژاد

تخصص : programmer

@hosseinshirinegad98 3 سال پیش مطرح شد

بفرما اینو تستش کن ببین همون هست که میخوای؟؟

<!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 بدین.

ارسال پاسخ

حسین شیری نژاد

تخصص : programmer

@hosseinshirinegad98 3 سال پیش مطرح شد

سلام و درود این کدو با جاوااسکریپت خودت هم میتونی بنویسی بنده این کارو قبال انجام دادم و فعلا از حوصله من خارجه و دسترسی هم به اون کد قبلیم ندارم . با جاواسکریپت میتونی این کارو انجام بدی.

ارسال پاسخ

grandfather

تخصص : پدربزرگ ...

@hossein0065 3 سال پیش مطرح شد

-3

@hosseinshirinegad98 بله میدونم که با جاوا میشه
اما چجوریشو نمیدونم :)

ارسال پاسخ

aliiiabniki

تخصص : full stack developer

@aliiiabniki 3 سال پیش مطرح شد

سلام
میتونید از تابع setInterval در جاوااسکریپت استفاده کنید
سرچ کنید و نمونه های مخلفشو تو نت ببینید
متوجه ساختار و نوع استفادش میشید
موفق باشید

ارسال پاسخ

حسین شیری نژاد

تخصص : programmer

@hosseinshirinegad98 3 سال پیش آپدیت شد

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';

ارسال پاسخ

حسین شیری نژاد

تخصص : programmer

@hosseinshirinegad98 3 سال پیش آپدیت شد

-6

آقای دانشمند ببخشید مشکلتون با کد حل شد.

ارسال پاسخ

آقای هگز

تخصص : برنامه نویس وب

@mrhex 3 سال پیش مطرح شد

@hosseinshirinegad98
شما کسی چاقو زیر گلوتون نزاشته که حتما جواب بدید که :)
اگه حوصله جواب دادن ندارید خب توی این سکشن سایت نیاید چرا توهین میکنید به کسی که سوال پرسیده؟؟؟؟؟؟
@hesammousavi این مدل جدیده دیگه؟

ارسال پاسخ

grandfather

تخصص : پدربزرگ ...

@hossein0065 3 سال پیش مطرح شد

@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>

مشکل این کد اینه که شمارش معکوس رو به کاربر نمایش نمیده و کدهای شما هم با رفرش صفحه اغاز به شمارش میکنه
حالا ان دوتا رو چجوری باید با هم ادغام کرد جای سواله ؟

ارسال پاسخ

حسام موسوی

تخصص : طراح و برنامه نویس

@hesammousavi 3 سال پیش آپدیت شد

@hosseinshirinegad98
اگر حوصله پاسخگوویی ندارید پس فعالیت نکنید :)
کسی مجبور به اینکار نکرده شما رو
پس به شعور بقیه احترام بزارید 😑😑
این همه سوالی که شما پرسیدید و بقیه جواب دادن اگر بقیه دوستان با این ادبیات بهتون جواب میدادن خودتون چی بهشون میگفتید !!!!

ارسال پاسخ

grandfather

تخصص : پدربزرگ ...

@hossein0065 3 سال پیش آپدیت شد

@hesammousavi جناب موسوی سوال رو من مطرح کردم بعد حوصله پاسخ به چیو ندارم
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
کدوم ادبیات !!!!😐😐😐😐😐

ارسال پاسخ

حسین شیری نژاد

تخصص : programmer

@hosseinshirinegad98 3 سال پیش مطرح شد

سلام دارم روش کار میکنم بهتون کدشومیدم. اینکه با رفرش صفحه شمارش از نو شروع میشه مقداری دانش بیشتر در زمینه js میخواد. میشه مقدارشو در یه جا مثل localStorag ذخیره کرد و دوباره هنگام refresh خوندش و ادامه شمارشو انجام داد. این مسئله زیاد مهم نیست شاید البته برای کار شما لازم باشه. تواین موقعیت اکثرا کسی صفحه رو refresh نمیکنه.
ضمن اینکه در باره پیام آقای موسوی بگم ایشون به اشتباه بجای اینکه پیامو به من بدن به شما دادن .

ارسال پاسخ

grandfather

تخصص : پدربزرگ ...

@hossein0065 3 سال پیش مطرح شد

@hosseinshirinegad98 من فکر کنم سوالم رو درست مطرح نکردم
کدهایی که شما فرمودید اوکی هست
فقط اگه بشه با کلیک روی یک گزینه (برای مثال دکمه درخواست کد) این تایمر شروع به شمارش بکنه کار اوکی میشه

ارسال پاسخ

حسین شیری نژاد

تخصص : programmer

@hosseinshirinegad98 3 سال پیش مطرح شد

بفرما اینو تستش کن ببین همون هست که میخوای؟؟

<!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>

ارسال پاسخ

grandfather

تخصص : پدربزرگ ...

@hossein0065 3 سال پیش مطرح شد

@hosseinshirinegad98 ممنونم از وقتی که گذاشتید ...عااااالی

ارسال پاسخ

حسین شیری نژاد

تخصص : programmer

@hosseinshirinegad98 3 سال پیش مطرح شد

خواهش میکنم

ارسال پاسخ

حسام موسوی

تخصص : طراح و برنامه نویس

@hesammousavi 3 سال پیش مطرح شد

@hossein0065 اشتباه تگ کردم منظورم جناب @hosseinshirinegad98 بود !!!

ارسال پاسخ

negar

تخصص : اول راه

@negar 3 سال پیش مطرح شد

@hosseinshirinegad98 خیلی خوب بود

ارسال پاسخ

FOENIX

تخصص : کار آموز

@billchmin 3 سال پیش مطرح شد

با سلام خدمت شما
گاهی وقتا ما منظورمونو با محبت میگیم اما چون حالت چهره و گویشمون معلوم نیست شبیه به توهین میشه @hesammousavi

ارسال پاسخ

FOENIX

تخصص : کار آموز

@billchmin 3 سال پیش مطرح شد

ببخشید جناب من از کد شما استفاده کردم و شخصی سازیش کردم ولی نمی تونم بخش مربوط به رنگ دکمه شروع رو پیدا کنم ممنون میشم یکی راهنمایی کنه@hosseinshirinegad98

ارسال پاسخ

فرزین صالحی

تخصص : وردپرس

@salehifarzin 2 سال پیش آپدیت شد

تیکه کد این رو دارید بی زحمت برام ارسال کنید ؟ میخوام بطور خودکار مثلا از یک سال ی دفعه بیاد 0 و یک سال طول بکشه این که بیاد روی 0

@hosseinshirinegad98

ارسال پاسخ

شهاب

@shahabantic 1 ماه پیش آپدیت شد

سلام
@hosseinshirinegad98 امکانش هست این کد رو یه تغییراتی بدید که بعد اتمام زمان سنج بنویسه زمان شما به پایان رسید خیلی ممنون

ارسال پاسخ

صفحه بعد

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام

دوره‌های آموزشی

مسیرهای یادگیری

پیشرفت من

دوره‌های رایگان

گواهی پایان دوره

کد شمارش معکوس و فعال شدن ارسال مجدد

گزینش سوالات

گفت و گو های مرتبط

دسته ‌بندی سوالات

تگ‌های محبوب

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید