[英]multiple countdown time in one page
首先,我使用jalali /波斯日期和倒數jQuery插件對我不起作用。 對於前插件,必須輸入gregorian日期(如2017/5/2),但波斯語/ jalali日期是1396/2/17。
我有指定日期,小時,分鍾和秒的日期時間。 例如:
3天13小時4分25秒
23天2小時41分3秒...
我的天和小時分別是分鍾和秒,
我想倒數一頁的日期(他們的日期是白天的)
我使用此代碼,並且在頁面中只有一個日期時可以正常工作
html:
<div class="row">
@{TimeSpan span = (item.DiscountExpireDate - DateTime.Now);}
<ul class="countdown">
<li>
<span class="seconds">@span.Seconds</span>
<p class="seconds_ref">ثانیه</p>
</li>
<li class="seperator">:</li>
<li>
<span class="minutes">@span.Minutes</span>
<p class="minutes_ref">دقیقه</p>
</li>
<li class="seperator">:</li>
<li>
<span class="hours">@span.Hours</span>
<p class="hours_ref">ساعت</p>
</li>
<li class="seperator"> </li>
<li>
<span class="days">@span.Days</span>
<p class="days_ref">روز</p>
</li>
</ul>
</div>
和js
<script type="text/javascript">//for countdown
$(document)
.ready(function () {
var theDaysBox = $(".days");
var theHoursBox = $(".hours");
var theMinsBox = $(".minutes");
var theSecsBox = $(".seconds");
var refreshId = setInterval(function() {
var currentSeconds = theSecsBox.text();
var currentMins = theMinsBox.text();
var currentHours = theHoursBox.text();
var currentDays = theDaysBox.text();
if (currentSeconds == 0 && currentMins == 0 && currentHours == 0 && currentDays == 0) {
// if everything rusn out our timer is done!!
// do some exciting code in here when your countdown timer finishes
} else if (currentSeconds == 0 && currentMins == 0 && currentHours == 0) {
// if the seconds and minutes and hours run out we subtract 1 day
theDaysBox.html(currentDays - 1);
theHoursBox.html("23");
theMinsBox.html("59");
theSecsBox.html("59");
} else if (currentSeconds == 0 && currentMins == 0) {
// if the seconds and minutes run out we need to subtract 1 hour
theHoursBox.html(currentHours - 1);
theMinsBox.html("59");
theSecsBox.html("59");
} else if (currentSeconds == 0) {
// if the seconds run out we need to subtract 1 minute
theMinsBox.html(currentMins - 1);
theSecsBox.html("59");
} else {
theSecsBox.html(currentSeconds - 1);
}
},
1000);
});
</script>
但是,當我在頁面上有多個日期時,效果不佳,並且看來數字是總和。
https://jsfiddle.net/a7ucv468/1/
有人可以幫助我嗎?
您只需要為每個包裝元素標識一個包裝元素,例如:
$('.countdown").each( function {
然后在元素選擇器前面使用$(this).find()。 這會將功能綁定到倒數的每個實例。 當前,它只是在尋找“ days”類,因此它將僅使用找到的第一個類,否則會導致其他錯誤。 我將盡快寫一個工作示例。
我不確定這些數字,但它們似乎在這里獨立運行(將超時設置為較小以進行調試) https://jsfiddle.net/7nzcdhn3/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.