我想为我使用MVC EntityFrameWork的不同产品以及客户端jQuery和JavaScript呈现不同时间的倒计时。
当你数据表的渲染部分，这样你就可以找到一个JavaScriptSetInterval函数使其动态，但它不起作用当我只使用JavaScript方法SetTime(由自己制作(
SetTimer函数获取产品的剩余时间，我希望该函数每秒钟运行一次，使其成为动态
有其他方法可以执行此操作吗？
table = $('#ProductTable').DataTable({
"ajax": {
"url": "/api/product/",
"type": "GET",
"dataSrc": ""
},
"columns": [
{
"data": "id",
render: function (data, type, Product) {
debugger;
return "<div id='ProductCover'> <div id='Product-img-div'> <img src='/Content/Images/" + Product.images + "' width='200px'></div> <div style='margin-right: 50px;'> Product Name:<h5> " + Product.productName + " <h5> Product Descrption: <h5> " + Product.description + "</h5> </div> <div class='countdown'> End Time: <span class='clock'> " + **setInterval(SetTimer(Product.endBidDate),1000)** +" </span > </div > <br><div style='margin-left:50px;'> Current Highest Amount:<h5>" + Product.highestAmount + " </h5> </div> </div> <button type='button' class='btn btn-primary' onclick='BidModal(" + Product.id + ")'>new Bids </button> <button class='btn btn-primary' data-toggle='modal' data-target='#BuyerQuyerModal' data-whatever='#mdo' onclick='Select(" + Product.id + ")'>Ask Seller</button> </div> ";
}
}
]
})
}
这个脚本找到产品销售结束日期的剩余时间，我在HTML中调用这个函数(数据表的渲染部分(我如何用SetInterval调用它，这样我就可以在向后中计时
function setTimer(endTimes) {
var endTime = endTimes;
timerrrr = endTime
endTime = (Date.parse(endTime) / 1000);
var now = new Date();
now = (Date.parse(now) / 1000);
var timeLeft = endTime - now;
var days = Math.floor(timeLeft / 86400);
var hours = Math.floor((timeLeft - (days * 86400)) / 3600);
var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600)) / 60);
var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));
if (hours < "10") { hours = "0" + hours; }
if (minutes < "10") { minutes = "0" + minutes; }
if (seconds < "10") { seconds = "0" + seconds; }
return `${days} : ${hours} : ${minutes} : ${seconds}`;
}
我会将setInterval函数放在DataTableinitComplete选项中，而不是放在列渲染器中：
initComplete: function () {
setInterval(function () {
doCountdowns();
}, 1000);
}
下面是一个非常基本的可运行演示，显示了一种方法：
function doCountdowns() {
$( '.endtime' ).each(function( index ) {
doCountdown( this ); // a td node
});
}
function doCountdown( node ) {
let endTime = Date.parse( $( node ).html() ) / 1000;
let now = (Date.parse(new Date()) / 1000);
let timeLeft = endTime - now;
let days = Math.floor(timeLeft / 86400);
let hours = Math.floor((timeLeft - (days * 86400)) / 3600);
let minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600)) / 60);
let seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));
if (hours < "10") { hours = "0" + hours; }
if (minutes < "10") { minutes = "0" + minutes; }
if (seconds < "10") { seconds = "0" + seconds; }
$( node ).next("td").html( `${days} : ${hours} : ${minutes} : ${seconds}` );
}
$(document).ready(function() {
$('#example').DataTable( {
initComplete: function () {
setInterval(function () {
doCountdowns();
}, 1000);
}
} );
} );<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
</head>
<body>
<div style="margin: 20px;">
<table id="example" class="display dataTable cell-border" style="width:100%">
<thead>
<tr>
<th>Product ID</th>
<th>End Bid Date</th>
<th>Time Remaining</th>
</tr>
</thead>
<tbody>
<tr>
<td>123</td>
<td class="endtime">2022-12-04 13:44:35</td>
<td></td>
</tr>
<tr>
<td>456</td>
<td class="endtime">2022-11-07 06:21:12</td>
<td></td>
</tr>
<tr>
<td>789</td>
<td class="endtime">2022-10-04 17:23:00</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>您可能需要对此进行调整，以考虑到您的特定数据&格式化——以及您使用Ajax数据源的事实——但方法应该是相同的。
作为一种增强：当截止日期到来时，您可能还需要一些逻辑来处理数据，否则将显示不正确的数据。