如何让一组每 30 秒增加一次的数字按升序排列？

Question

如果你运行下面这个javascript代码，

var i = 20220215155;
    function increment(){
     i++;
        document.getElementById('period').innerHTML += i + "<br />" + "<hr />" ;
    }   
    setInterval('increment()', 32100);

您会看到，每隔 30 秒，数字 (20220215155) 就会递增一次，每次递增都会打印在新的一行上。例如;

**20220215156

20220215157

20220215158

20220215159

20220215160**

但我希望每次打印后每次递增后都按这种方式排序；

**20220215160

20220215159

20220215158

20220215157

20220215156**

如果 20220215156 在第一行，30 秒后，20220215157 应该在第一行并且之前的数字会出现自动转到第二行，在接下来的 30 秒后，20220215158 出现在第一行，依此类推。只希望大家明白。

拜托，我需要帮助。

Answer 1

insertAdjacentHTML 在这里很有用。您可以使用 afterbegin 属性将包含数字的新元素添加到容器顶部。

const i = 20220215155;
const div = document.querySelector('#period');

// The function accepts a variable (the new number)
function increment(i) {

  // Prepend the number to the container
  div.insertAdjacentHTML('afterbegin', `<div>${i}</div><hr>`);

  // Call the function again with an incremented number
  setTimeout(increment, 1000, ++i);

}

increment(i);

<div id="period"></div>

其他文档

Template/string literals

Answer 2

let info = document.getElementById('info');
let num = 20220215155;

setInterval(() => {
    let newElement = document.createElement('p');
    newElement.innerHTML = `${++num}<hr>`;
    info.insertBefore(newElement, info.childNodes[0]); //Adding newElement at the beginning of the parent
}, 1000);

<html>
  <body>
    <div id="info">
      </div>
  </body>
</html>

如何让一组每 30 秒增加一次的数字按升序排列？

How can I make a set of numbers that increase every 30 seconds to line up in an ascending order?

javascript

sorting

algorithm

function

auto-increment