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