我正在Asp.net MVC中的一个拍卖网站上工作,并且试图显示每个项目的拍卖剩余时间的计时器。我将模型的项目列表传递到我的cshtml页面,然后像这样遍历它们:
我的JavaScript函数启动计时器:
function countdown(time) {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = time - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in the element with id="timeLeft"
document.getElementById("timeLeft").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
}, 1000);
然后我的模型的迭代器,用项目的结束日期调用js函数
@foreach (var item in Model)
{
//code here
countdown(@item.EndDate)
<text id="timeLeft"></text>
}
我的脚本引用了 <script src="~/Scripts/countdown.js" />
我遇到的问题是如何使用ac#razor变量调用此js函数。对一项执行基本操作,例如:
<body onload= "countdown('@item.EndDate')">
我想出一种疯狂的方式来做我想做的事情,可能效率不高,可能是整个编码社区的罪过,但这是:
@foreach (var item in Model)
{
<script>
function countdown(endYear, endMonth, endDay, endHours, endMin, num) {
window.setInterval(function () { StartCount(endYear, endMonth, endDay, endHours, endMin, num); }, 1000);
}
function StartCount(endYear, endMonth, endDay, endHours, endMin, num) {
var now = new Date();
var endDate = new Date(endYear, endMonth - 1, endDay, endHours, endMin);
var leftTime = endDate.getTime() - now.getTime();
var leftSecond = parseInt(leftTime / 1000);
var day = Math.floor(leftSecond / (60 * 60 * 24));
var hour = Math.floor((leftSecond - day * 24 * 60 * 60) / 3600);
var minute = Math.floor((leftSecond - day * 24 * 60 * 60 - hour * 3600) / 60);
var second = Math.floor(leftSecond - day * 24 * 60 * 60 - hour * 3600 - minute * 60);
var id = "timeLeft" + num;
document.getElementById(id).innerHTML = day + "d " + hour + "h "
+ minute + "m " + second + "s ";
}
countdown(@item.EndDate.Year, @item.EndDate.Month, @item.EndDate.Day,@item.EndDate.Hour, @item.EndDate.Minute, @num)
</script>
@{string countNum = "timeLeft" + num;}
<text id= @countNum></text>
@{num++;}
//code
}
但是它仍然异步加载到所有项目都加载的地方,然后时钟都在第二秒出现,所有内容也相应地移动。可能是由于我最初的问题,即无法调用body onload。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句