<div class="emojis">
<img class="emoji" src="http://img.cdn.sugarat.top/mdImg/MTU4NDE1NzU4NTE2Mg==584157585163"></img>
<img class="emoji" src="http://img.cdn.sugarat.top/mdImg/MTU4NDE1NzU4NTE2Mg==584157585163"></img>
<img class="emoji" src="http://img.cdn.sugarat.top/mdImg/MTU4NDE1NzU4NTE2Mg==584157585163"></img>
<img class="emoji" src="http://img.cdn.sugarat.top/mdImg/MTU4NDE1NzU4NTE2Mg==584157585163"></img>
<img class="emoji" src="http://img.cdn.sugarat.top/mdImg/MTU4NDE1NzU4NTE2Mg==584157585163"></img>
<img class="emoji" src="http://img.cdn.sugarat.top/mdImg/MTU4NDE1NzU4NTE2Mg==584157585163"></img>
<img class="emoji" src="http://img.cdn.sugarat.top/mdImg/MTU4NDE1NzU4NTE2Mg==584157585163"></img>
<img class="emoji" src="http://img.cdn.sugarat.top/mdImg/MTU4NDE1NzU4NTE2Mg==584157585163"></img>
<img class="emoji" src="http://img.cdn.sugarat.top/mdImg/MTU4NDE1NzU4NTE2Mg==584157585163"></img>
</div>
.emojis {
display: flex;
width: 91px;
height: 91px;
flex-wrap: wrap;
}
.emoji {
width: 30px;
height: 30px;
visibility: hidden;
box-sizing: border-box;
}
// 获取到所有的
let $emojis = document.querySelectorAll(".emoji");
// 记录上次展示和当前展示的
let oldFlag = 4,
newFlag = 4;
function loop() {
$emojis[oldFlag].style.visibility = "hidden";
$emojis[newFlag].style.visibility = "visible";
oldFlag = newFlag;
newFlag = ~~(Math.random() * 100) % 9;
setTimeout(loop, 1000);
}
loop();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.