[英]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; }
这可行。 笔记:
let
或var
变量会使它们成为全局变量,这是一件坏事。 变量应仅在其应有的位置可访问。 看到这篇文章。 last
列表中的元素数少于附加到ul
的li
元素数,则上述代码将失败。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.