هدایت کاربر به صفحه مقصد با تاخیر توسط JavaScript و JQuery
یکشنبه 27 اردیبهشت 1394تاخیر و یا نمایش یک شمارنده معکوس در یک صفحه پس از کلیک کاربر بر روی لینکی خاص یکی از امکانات موجود در 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>
پس از کلیک بر روی دکمه یک شمارنده آغاز به شمارش معکوس میکند و پس از اتمام کاربر را به صفحه مشخص شده هدایت می کند .
- ASP.net
- 2k بازدید
- 1 تشکر