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

مشخصات سوال کننده :

کاربر : pedram_khan امتیاز کاربر : 277 رتبه کاربر : 6

دسته بندی : جی کوئری جاوا اسکریپت

نظر ویرایش گزارش نشان

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

تعداد بازدید این سوال : 5284

پاسخ دهنده : saedbfd 03:00 1399/07/05

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

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

برای ایجاد تایمر ثانیه شمار در جی کوئری چندین راه حل وجود داره اما یکی از راه حل های مناسب این کار استفاده از تابع 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 استفاده شده. به روشهای دیگه ای هم میشه تایمر ایجاد کرد که یک نمونه اش رو می تونید توی این لینک مشاهده کنید.

ویرایش شده در دوشنبه 20 تیر 1401 ساعت 15:24:48

به این پاسخ امتیاز بدهید 0

امتیاز: 1654 رتبه: 1

نظر ویرایش گزارش

آخرین سوالات ثبت ‌شده

سوالات مرتبط

آموزش های پرطرفدار

آموزش ساخت اتوماسیون اداری تحت وب

آموزش ساخت سیستم فروش و انبارداری وب

آموزش ساخت سیستم حقوق و دستمزد وب با سینکفیوژن

آموزش ساخت سیستم آزمونگیر آنلاین

برای ارسال پاسخ لطفا وارد حساب کاربری خود شوید. ورود