JavaScript automatically add and delete

extract a number as a row from"{success: true,data: ["aPermian 92", "brece0", "cpence0", "dpjence43", "ePerce0", "fmeme80", "gpower0", "hgrade50", "jPower20", "kPower5"]}". The page can only display 8 lines. For each additional line, you need to delete the previous line and add a new line, and you need to mount the deleted animation. Is there a big boss to give me a solution

Html5 javascript
Mar.14,2021 
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];
});

I think we can use a two-dimensional array to store
use Array.shift () to delete the first array
use Array.unshift () to add a new array

it's easy to strip out the numbers, just add split in a loop

Animation effects can be achieved by controlling the class name

write you a demo 

    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)
          }
    })

Previous: Video.js,demo is the same as the code of its own project, but the effect is not the same.

Next: How does ThinkPHP5 hide module and controller names

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu