هدایت کاربر به صفحه مقصد با تاخیر توسط JavaScript و JQuery

یکشنبه 27 اردیبهشت 1394

تاخیر و یا نمایش یک شمارنده معکوس در یک صفحه پس از کلیک کاربر بر روی لینکی خاص یکی از امکانات موجود در JavaScript و JQuery باشد , همچنین میتوانیم این شمارنده را تنظیم کنیم که کاربر پس از کلیک بر روی لینک با چه تاخیری به صفحه مقصد هدایت شود

هدایت کاربر به صفحه مقصد با تاخیر توسط JavaScript و JQuery

برای هدایت با تاخیر کاربر به صفحه ای دیگر  از توابع Java Script یا JQuery استفاده میکنیم . در ابتدا یک صفحه ایجاد می کنیم , سپس یک کنترل Button در صفحه قرار میدهیم .

<input type="button" id="btnRedirect" value="ارسال" />

برای تگ button اضافه شده یک مقداری خاص به ID آن اختصاص میدهیم (در این مثال مقدار btnRedirect را قرار داده ایم)

سپس با استفاده از تابع جاوا اسکریپت می توانیم مقدار تخصیص داده شده به id کنترل button را فراخوانی کنیم که پس از کلیک کاربر را پس از مدتی به صفحه ای دیگر هدایت کند :

<script type="text/javascript">
            function DelayRedirect() {
                var seconds = 5;
                var dvCountDown = document.getElementById("dvCountDown");
                var lblCount = document.getElementById("lblCount");
                dvCountDown.style.display = "block";
                lblCount.innerHTML = seconds;
                setInterval(function () {
                    seconds--;
                    lblCount.innerHTML = seconds;
                    if (seconds == 0) {
                        dvCountDown.style.display = "none";
                        window.location = "http://barnamenevisan.org/";
                    }
                }, 1000);
            }
        </script>

اگر به تابع ذکر شده توجه فرمایید , متوجه میشوید که ما از رویدادی با نام SetInterval استفاده کرده ایم , که بر اساس میلی ثانیه میباشد .هر بار که این تابع اجرا میشود , یک شمارنده معکوس آغاز میشود و مقدار زمانی که در خود تابع تعریف کرده ایم را محاسبه میکند و بر اساس آن شمارش معکوس می کند پس از اتمام شمارش کابر را به صفحه مشخص شده هدایت میکند

همچنین دستور JQuery نیز همانند دستور زیر میباشد :

<script type="text/javascript">
        $(function () {
            $("#btnRedirect").click(function () {
                var seconds = 5;
                $("#dvCountDown").show();
                $("#lblCount").html(seconds);
                setInterval(function () {
                    seconds--;
                    $("#lblCount").html(seconds);
                    if (seconds == 0) {
                        $("#dvCountDown").hide();
                        window.location = "http://barnamenevisan.org/";
                    }
                }, 1000);
            });
        });
    </script>

 

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

فایل های ضمیمه

احسان حسینی

نویسنده 42 مقاله در برنامه نویسان

کاربرانی که از نویسنده این مقاله تشکر کرده اند

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید