لطفا نحوه ایجاد تایمر ثانیه شمار توسط جی کویری رو با مثال توضیح دهید.
متشکر
برای ایجاد تایمر ثانیه شمار در جی کوئری چندین راه حل وجود داره اما یکی از راه حل های مناسب این کار استفاده از تابع SetInterval هست. خب حالا به صورت عملی این کار رو انجام میدیم.
<div class="c" id="120"></div>
دقت کنید که آیدی div دقیقا زمانی هست که شما میخواید به صورت تایمر نمایش بدید. مثلا در این مثال ما 120 رو قرار دادیم به معنی اینکه تایمر ما 120 ثانیه به صورت معکوس قراره بشماره.
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);
}
$(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 استفاده شده. به روشهای دیگه ای هم میشه تایمر ایجاد کرد که یک نمونه اش رو می تونید توی این لینک مشاهده کنید.
تاریخ :
1403/07/27
- ساعت :
03:21:00 PM
- بازدید :
126
- پاسخ :
1
|
تاریخ :
1403/07/09
- ساعت :
07:25:00 PM
- بازدید :
234
- پاسخ :
0
|
تاریخ :
1403/05/20
- ساعت :
09:18:00 PM
- بازدید :
393
- پاسخ :
0
|
تاریخ :
1402/01/26
- ساعت :
03:38:00 PM
- بازدید :
1211
- پاسخ :
1
|
تاریخ :
1398/08/09
- ساعت :
10:17:00 PM
- بازدید :
4589
- پاسخ :
1
|
تاریخ :
1402/11/13
- ساعت :
12:48:00 AM
- بازدید :
849
- پاسخ :
4
|
تاریخ :
1402/08/06
- ساعت :
01:20:00 PM
- بازدید :
700
- پاسخ :
1
|
تاریخ :
1398/08/21
- ساعت :
03:53:00 PM
- بازدید :
3045
- پاسخ :
1
|
تاریخ :
1398/08/03
- ساعت :
10:17:00 PM
- بازدید :
16952
- پاسخ :
4
|
تاریخ :
1402/04/30
- ساعت :
08:10:00 AM
- بازدید :
893
- پاسخ :
2
|
تاریخ :
1403/05/30
- ساعت :
09:22:00 AM
- بازدید :
370
- پاسخ :
1
|
تاریخ :
1402/07/23
- ساعت :
04:01:00 PM
- بازدید :
909
- پاسخ :
1
|
تاریخ :
1402/08/01
- ساعت :
06:25:00 PM
- بازدید :
891
- پاسخ :
1
|
تاریخ :
1402/08/16
- ساعت :
10:38:00 AM
- بازدید :
1281
- پاسخ :
1
|
تاریخ :
1398/08/17
- ساعت :
01:27:00 AM
- بازدید :
4746
- پاسخ :
1
|
تاریخ :
1402/09/08
- ساعت :
07:34:00 PM
- بازدید :
1113
- پاسخ :
1
|
تاریخ :
1402/09/21
- ساعت :
11:10:00 PM
- بازدید :
564
- پاسخ :
1
|
تاریخ :
1403/07/27
- ساعت :
03:21:00 PM
- بازدید :
126
- پاسخ :
1
|
تاریخ :
1403/07/26
- ساعت :
09:00:00 PM
- بازدید :
72
- پاسخ :
0
|
تاریخ :
1403/07/13
- ساعت :
12:06:00 PM
- بازدید :
300
- پاسخ :
1
|