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

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

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

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

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

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

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

هوش مصنوعی

پاسخ هوش مصنوعی

برای ایجاد یک تایمر ثانیه شمار با استفاده از جی کویری، می توانیم از تابع setInterval استفاده کنیم که به ما این امکان را می دهد تا به صورت دوره ای تابعی را اجرا کنیم.

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





    
    
    تایمر ثانیه شمار
    
    



تایمر ثانیه شمار
0

در این کد:

ما یک دکمه برای شروع و یک دکمه برای متوقف کردن تایمر داریم.
با استفاده از جی کویری، به دکمه ها کلیک می کنیم تا تایمر را شروع یا متوقف کنیم.
هر بار که تایمر به روز می شود، مقدار ثانیه ها به مقدار متن داخل div با id "timer" اضافه می شود.

شما می توانید این کد را در یک فایل HTML ذخیره کرده و در مرورگر خود اجرا کنید تا تایمر ثانیه شمار را مشاهده کنید.

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

امتیاز: - رتبه: -

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

پاسخ دهنده : 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

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

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

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

سوالات مرتبط

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

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

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

پاسخ هوش مصنوعی

تایمر ثانیه شمار

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

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

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

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

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