繁体   English   中英

动态创建更新的html列表

[英]Dynamically create a html list that update

我正在尝试动态创建一个HTML列表,该列表会在收到新信息时更新。 这是我的代码:

 setlast(); function setlast() { last = [ "xyyxx", "yxyxx", "xxxxy", "yyxxy", "yxyxy"] }; setInterval(function() { last[0] = Math.random(); last[1] = Math.random(); last[2] = Math.random(); last[3] = Math.random(); last[4] = Math.random(); }, 2000); createHtml(); function createHtml() { setTimeout(function(){ ul = document.createElement("ul"); document.body.appendChild(ul); ul.setAttribute("id", "lyl"); for(w=0; w<5; w++) { li = document.createElement("li"); ul.appendChild(li); } updateT(); },3500); } function updateT() { setInterval(function() { li.innerHTML = last[w]; },2000); } 
 #listwrapper { margin-top: 2%; width : 100%; } li { display : inline; float : left; padding : 10px; } 

像上面一样,我不确定。

如果我像下面那样做,代码可以工作,但是每次Math.random生成新数字时,每个li都不会更新。

 setlast(); function setlast() { last = [ "xyyxx", "yxyxx", "xxxxy", "yyxxy", "yxyxy"] }; setInterval(function() { last[0] = Math.random(); last[1] = Math.random(); last[2] = Math.random(); last[3] = Math.random(); last[4] = Math.random(); }, 2000) createHtml(); function createHtml() { setTimeout(function(){ ul = document.createElement("ul"); document.body.appendChild(ul); ul.setAttribute("id", "lyl"); for(w=0; w<5; w++) { li = document.createElement("li"); ul.appendChild(li); li.innerHTML = last[w]; } },3500) } 
 #listwrapper { margin-top: 2%; width : 100%; } li { display : inline; float : left; padding : 10px; } 
 

所以我的问题是 :每次生成新号码时,如何显示和更新列表?

非常感谢。

这是仅使用pur javascript的工作示例:

 /** * Update The HTML * * @param {Array} last - ensure the array exist by passing it as an argument */ function updateHtml(last) { const ul = document.querySelector('#toUpdate'); // Empty existing li node ul.innerHTML = '' for (let i = 0; i < last.length; i++) { // create and append li elements const li = document.createElement('li') li.innerHTML = last[i] ul.appendChild(li); } } setInterval(function() { // call with random stuff updateHtml([ Math.random(), Math.random(), Math.random(), Math.random(), Math.random() ]) }, 2000) // first call with strings updateHtml([ "xyyxx", "yxyxx", "xxxxy", "yyxxy", "yxyxy" ]); 
 #listwrapper { margin-top: 2%; width: 100%; } li { display: inline; float: left; padding: 10px; } 
 <div id="main"> <ul id="toUpdate"> </ul> </div> 

关于DOM更新,有很多事情要说,但是我所做的大部分工作都是吸引更新功能来专门化它,因此updateHtml根据'last'参数来操纵DOM。

请注意,这是数据绑定的一种方式。 您可以通过使用更复杂的结构和模式(例如Observable)来做更多的事情。

希望对您有所帮助

 setlast(); function setlast() { last = [ "xyyxx", "yxyxx", "xxxxy", "yyxxy", "yxyxy"] }; setInterval(function() { last[0] = Math.random(); last[1] = Math.random(); last[2] = Math.random(); last[3] = Math.random(); last[4] = Math.random(); }, 2000); createHtml(); function createHtml() { setTimeout(function(){ ul = document.createElement("ul"); document.body.appendChild(ul); ul.setAttribute("id", "lyl"); for(w=0; w<5; w++) { li = document.createElement("li"); ul.appendChild(li); } updateT(); },3500); } function updateT() { setInterval(function() { list = ul.childNodes; for (var i = 0; i < list.length; i++) { list[i].innerHTML = last[i]; } },2000); } 
 #listwrapper { margin-top: 2%; width : 100%; } li { display : inline; float : left; padding : 10px; } 

这可行。 笔记:

  1. 创建没有关键字letvar变量会使它们成为全局变量,这是一件坏事。 变量应仅在其应有的位置可访问。 看到这篇文章。
  2. 如果last列表中的元素数少于附加到ulli元素数,则上述代码将失败。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM