ایجاد تایمر ثانیه شمار توسط جی کویری

02:30:00 AM - 1399/07/05

به این سوال امتیاز بدهید 0 تعداد بازدید این سوال : 4885

پاسخ دهنده : saedbfd 03:00:00 AM - ۱۳۹۹/۰۷/۰۵

ایجاد تایمر ثانیه شمار توسط جی کوئری

ایجاد تایمر در جی کوئری

برای ایجاد تایمر ثانیه شمار در جی کوئری چندین راه حل وجود داره اما یکی از راه حل های مناسب این کار استفاده از تابع SetInterval هست. خب حالا به صورت عملی این کار رو انجام میدیم.

ابتدا یک صفحه html خالی رو ایجاد کنید. دقت کنید که از قبل فایل های مربوط به جی کوئری به صفحه html لینک شده باشه.
خب در مرحله بعد یک div با آیدی و کلاسی که در ادامه مشخص شده ایجاد کنید

  <div class="c" id="120"></div>

دقت کنید که آیدی div دقیقا زمانی هست که شما میخواید به صورت تایمر نمایش بدید. مثلا در این مثال ما 120 رو قرار دادیم به معنی اینکه تایمر ما 120 ثانیه به صورت معکوس قراره بشماره.

حالا یک تابع با نام startdeadlinefunc ایجاد کنید و دستورات زیر رو داخلش بنویسید:

function startdeadlinefunc() {
        var n = $('.c').attr('id');
        var c = n;
        $('.c').text(c);
        myVar = setInterval(function () {
            c--;
            if (c >= 0) {
                $('.c').html("زمان باقیمانده :  " + c + " ثانیه ");
            }
            if (c == 0) {
                $('.c').text('زمان شما به پایان رسید.');
            }

        }, 1000);
}

خب حالا باید در یک جایی این تابع رو صدا بزنیم تا تایمر شروع به شمردن کنه. ما این کار رو به محض Load شدن صفحه انجام میدیم. کدهای زیر رو ببینید :

      $(document).ready(function () {
            startdeadlinefunc();
        });

خب الان اگر پروژه رو اجرا کنید باید تایمر شما شروع به کار کردن کنه. به طور کلی کدهای صفحه html شما به این صورت باید نوشته شده باشه :

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    
    <title></title>
</head>
<body>
    <div class="c" id="120"></div>
</body>
</html>

<script src="~/jquery.min.js"></script>
<script>
    $(document).ready(function () {
       startdeadlinefunc();
    });

    function startdeadlinefunc() {
        var n = $('.c').attr('id');
        var c = n;
        $('.c').text(c);
        myVar = setInterval(function () {
            c--;
            if (c >= 0) {
                $('.c').html("زمان باقیمانده :  " + c + " ثانیه ");
            }
            if (c == 0) {
                $('.c').text('زمان شما به پایان رسید.');
            }

        }, 1000);
    }
</script>

خب بعد از اجرای پروژه می بینید که تایمر شما شروع به شمردن میکنه. در بدنه تابع startdeadlinefunc اگر دقت کنید متوجه می شید که از تابع next استفاده شده. به روشهای دیگه ای هم میشه تایمر ایجاد کرد که یک نمونه اش رو می تونید توی این لینک مشاهده کنید.

ویرایش شده در دوشنبه ۲۰ تیر ۱۴۰۱ ساعت ۱۵:۲۴:۴۸