JavaScript自动添加删除

Question

从 '{success: true,data: ["a,92","b,0","c,0","d,43","e,0","f,80","g,0","h,50","j,20","k,5"]}'中提取数字作为一行，页面只能显示8行内容，每增加一行需要删除上一行，再添加新一行，并且需要挂载上删除的动画，有没有大佬给个解决思路

Answer 1

剥离出数字很简单，循环加split就可以了

动画效果可以通过控制类名来实现

给你写个demo

    #lists li{
      opacity: 0;
    }

    #lists .list{
      opacity: 1;
      transition: opacity 0.5s linear;
    }

    #lists .delete{
      animation: delete 0.5s ease-in-out forwards;
    }

    #lists .hide{
        display: none;
    }

    @keyframes delete
    {
      0% {color: red; text-decoration:line-through; opacity:1;}
      100% {opacity:0;}
    }

    let arr = ["a,92","b,0","c,0","d,43","e,0","f,80","g,0","h,50","j,20","k,5"]

    const lists = document.getElementsByTagName('body')[0].appendChild(document.createElement("ul"))
    lists.setAttribute("id", "lists")

    const num = 8  // 限制显示的条数
    const second = 0.5  // 每条数据的动画时长

    arr.map((v, i) => {
          let li = document.createElement("li")
          li.innerHTML = v.split(',')[1]
          li.style.transitionDelay = i * second + 's'
          lists.appendChild(li)
          
          setTimeout(() => {
            li.classList.add('list')
          }, 0)
            
          if(i > (num - 1)) {
            let deleteLi = document.getElementById('lists').getElementsByTagName('li')[i - num]
            deleteLi.classList.add("delete")
              
            let delay = [i - 1] * second
            deleteLi.style.animationDelay = delay + 's'
            
            setTimeout(() => {
              deleteLi.classList.add("hide")
            }, (delay + second) * 1000)
          }
    })

Answer 2

let data = {success: true,data: ["a,92","b,0","c,0","d,43","e,0","f,80","g,0","h,50","j,20","k,5"]};

let col = data.data.map((v) => {
  return v.split(',')[1];
});

我觉得可以用二维数组存储
使用Array.shift()删除第一个数组
使用Array.unshift()添加新数组