Question

我正在使用Express.js和EJS处理计时器。我正在尝试动态更新html，但我没有显示任何内容。但我在我的cli中获得了console.log。

<div id="countdown">
                    <% setInterval(function(){ %>
                        <% var now = new Date().getTime(); %>
                        <% var distance = expiration - now; %>
                        <% var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); %>
                        <% var seconds = Math.floor((distance % (1000 * 60)) / 1000); %>
                        <% if (distance > 0 ) { %>
                            <% console.log(minutes + ':' + seconds) %>
                            <p>This isn't showing</p>
                        <% } else { %>
                            <% console.log('expired') %>
                            <p>This isn't showing</p>
                        <% }; %> 
                    <% }, 1000); %>
                </div>

CLI 我错过了一些明显的东西吗？

我有其他动态代码<h2>Send <%= displayAmount %> to:</h2> 但他们没有在条件内工作。

Answer 1

问题是JavaScript一直在运行，就像你编写它一样，但页面没有重新渲染，因为它只被告知渲染一次。

您必须编写另一个JavaScript函数，每次迭代都会重新呈现DOM。

类似的东西：

let myDiv = document.getElementById('countdown');

// Delete previously added elements
while (myDiv.firstChild) {
  myDiv.removeChild(myDiv.firstChild);
}

// Create a <p>
let p = document.createElement('p');

// Create your text
let text = document.createTextNode(`${minutes}:${seconds}`);
// OR:
let text = document.createTextNode('Expired');

// Append the text to <p>
p.appendChild(text);

// Append the <p> to div
myDiv.appendChild(p);

EJS逻辑有效，但html没有显示

1 个答案: