已解決430363個問題，去搜搜看，總會有你想問的

如何根據給定日期將不同的計時器添加為引導程序數據表行中的列？

首頁猿問如何根據給定日期將不同的計時器添加...

如何根據給定日期將不同的計時器添加為引導程序數據表行中的列？

JavaScript

慕標5832272 2022-12-02 10:48:13

因此，我試圖在獲取截止日期值的表上添加一個倒數計時器，并添加一個顯示剩余時間的單元格。目前，它適用于一條記錄，但在添加兩行或多行時，我得到了最后一行計時器的副本，復制了所有記錄的計時器單元<div class="card mb-3"> <div class="card-header"> <i class="fa fa-table"></i> <sup><span class="badge badge-warning"> {{ new}} New</span></sup>New Orders From Clients </div> <div class="card-body"> <div class="table-responsive"> <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0"> <thead> <td>Reference Code</td> <td>Title</td> <td>Number of Pages</td> <td>Take this Task</td> <td>Due Date</td> <td>Remaining Time</td> </thead> {% for t in order %} <tbody> <tr> <td> <a href="{% url 'view_order' pk=t.pk %}">{{ t.urlhash }}</a> </td> <td>{{ t.title }}</td> <td>{{ t.Number_of_pages }}</td> <td> {% if t.status == False %} <a href="{% url 'claim' pk=t.pk %}" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm">Take order</a>{% else %} <span>✔ Taken</span> {% endif %} </td> <td>{{ t.due_date }} </td> <td id="time" class="text-warning"></td> </tr> <script> // Set the date we're counting down to var countDownDate = new Date("{{ t.due_date.isoformat }}").getTime(); // console.log(dex); //var countDownDate = new Date("July 18, 2020 19:27:25").getTime(); // Update the count down every 1 second var x = setInterval(function() {

查看完整描述

1 回答

慕容708150

TA貢獻1831條經驗獲得超4個贊

這不是真正的 DataTables 問題，但它很有趣，所以這就是我的工作：

(() => {

setInterval(() => {

const table = document.getElementById("dataTable")

for (var i = 0, row; row = table.rows[i]; i++) {

const dueDate = row.querySelector('.due-date')

if (dueDate) {

const dateBits = dueDate.innerHTML.split('/')

const dateDue = new Date(dateBits[2], dateBits[1], dateBits[0]).getTime()

const now = new Date().getTime()

const distance = dateDue - now

const countDownDate = row.querySelector('.text-warning')

if (distance < 0) {

countDownDate.innerHTML = 'EXPIRED'

} else {

const days = Math.floor(distance / (1000 * 60 * 60 * 24));

const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));

const seconds = Math.floor((distance % (1000 * 60)) / 1000);

countDownDate.innerHTML = `Remaining time ${days} Days ${hours} hours ${minutes} minutes ${seconds}s`

}

}, 1000)

})()

我們在這里所做的是每秒抓取表格，遍歷表格行并檢查是否有適當的單元格稱為due-date。如果存在，那么我們檢查距離，如果它是負數，那么我們將具有類的單元格設置text-warning為EXPIRED否則，我們添加適當的消息。我希望這有幫助嗎？在這里工作 JSFiddle 。

反對回復 2022-12-02

1 回答
0 關注
100 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何根據給定日期將不同的計時器添加為引導程序數據表行中的列？

如何根據給定日期將不同的計時器添加為引導程序數據表行中的列？

1 回答

添加回答

如何根據給定日期將不同的計時器添加為引導程序數據表行中的列？