怎么把三组数据按一定速度渲染到一个span?

数据这是循环出来的

现在页面有三个span把数据渲染进去,起点距对avg,入水深对shuimian,水位对height,三个span同时渲染,根据一定的速度把五组数据渲染

你说的根据一定速度什意思。参考下面的代码

let data=[
{
 avg:"11",
 shuimain:"222",
 height:"222"
}
]
let html=""

data.map((item)=>{
 html+=`<div>
<span>起点距：${item.avg}</span>
<span>如水深：${item.shuimain}</span>
<span>水位：${item.height}</span>
</div>`

b.innerHtml=html; //b是容器
})


//隔一个时间渲染

<div id="box"></div> //html容器

//js
let data=[
{
 avg:"11",
 shuimain:"222",
 height:"222"
}
]
let box=document.getElementById("box");
let len=data.length;
 let time;
for(var i=0;i<len;i++){
  time=setInterval(()=>{{
    box.appenChild(`<div>
<span>起点距：${item.avg}</span>
<span>如水深：${item.shuimain}</span>
<span>水位：${item.height}</span>
</div>`);
 },400)
 if(i==len){
  clearInterval(time);
 }
}
})

这个一定速度是什么意思  前端使用的什么框架 vue的话 直接在页面使用v-for进行渲染 原生的话 使用for循环获取到的数组 拼接模板字符串 然后将字符串渲染到对应DOM 就可以。

leftspan是容器,,,labelf是对象

setInterval(() => {
        if(index>=labelf.length){
          index = 0
        }
        setDate(labelf)
      }, 1000);
    content.forEach(function (item) {
        labelf.push({avg: item.avg, shuimian: item.shuimian, height: item.height, })
    })
    function setDate(mydata){
    	/*左侧渲染*/
        var leftspan = $(".laber_left span");
        leftspan[0].innerHTML = labelf[index].avg;
        leftspan[1].innerHTML = labelf[index].shuimian;
        leftspan[2].innerHTML = labelf[index].height;
    	index++;
    }

解决方法,这样可以实现了