如何克隆内容并在javascript中更改它

Question

我想显示一个新的数字显示每天从*96到*01克隆96和推它在第二天这样的

<!-- HTML -->
<div class="content">
<a class="days day-96" style="display:none;">
*96
</a>
<a class="days day-95" style="display:none;">
*95
</a>
</div>

// JS
$(document).ready(function(){
// Delay the action by 10000ms
setTimeout(function(){
$(".day-96").show();
}, 0000);
setTimeout(function(){
$(".day-95").show();
}, 5000);
});

Answer 1

在jquery中有克隆元素的方法，在vanilla js中也有类似的方法

.cloneNode(true)for vanilla js

// JS
$(document).ready(function(){
var el = $(".days").clone(),
count = 100
$(".content").text("")
while(count){
var newEl = el.clone()
newEl.html(count)
$(".content").append(newEl)
count--
}
animate(100)  // define delay in ms
});

function animate(delay){
var i = 0,loop,days=$(".days")
loop = setInterval(function(){
if(i < days.length){days.eq(i).addClass("show")}
else{clearInterval(loop)}
i++
},delay)
}

.days {opacity:0;transition:all 0.2s ease;}
.show {opacity:1;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.16/tailwind.min.css" integrity="sha512-5D0ofs3AsWoKsspH9kCWlY7qGxnHvdN/Yz2rTNwD9L271Mno85s+5ERo03qk9SUNtdgOZ4A9t8kRDexkvnWByA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="content flex flex-wrap">
<a class="days border p-2" style="display:block;"></a>
</div>