如何让一组每 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>

附加文件

模板/字符串文字

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 秒增加一次的数字按升序排列？

问题描述

2 个解决方案

解决方案1
2 2022-02-17 22:13:26

解决方案2
2 已采纳 2022-02-17 23:24:58

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

问题描述

2 个解决方案

解决方案1 2 2022-02-17 22:13:26

解决方案2 2 已采纳 2022-02-17 23:24:58

解决方案1
2 2022-02-17 22:13:26

解决方案2
2 已采纳 2022-02-17 23:24:58