<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#show {
position: relative;
}
#show > div {
width: 100%;
height: 35px;
display: flex;
justify-content: space-around;
}
/* 动画帧 */
@keyframes scroll_up {
0% { top: 0px; }
50% { top: -35px; }
100% { top: -35px; }
}
.should_scroll {
animation: 1.4s scroll_up forwards;
}
</style>
</head>
<body>
<div id="show"></div>
<script>
//假的姓氏
var first_name = ['赵', '李', '周', '黄', '罗', '吴', '何', '杨', '郑', '刘'];
//假的电话号码第二位
var mid_phone = ['3', '5', '8']
//负责生成假数据的函数
function generate_data() {
let data_container = document.createElement("div");
let fake_name = document.createElement("div");
let fake_phone = document.createElement("div");
let fake_time = document.createElement("div");
fake_name.textContent = first_name[parseInt((first_name.length - 1)*Math.random())] + "**",
fake_phone.textContent = "1" + mid_phone[parseInt((mid_phone.length - 1)*Math.random())] + parseInt(9*Math.random()) + "****" + parseInt(8999*Math.random() + 1000),
fake_time.textContent = parseInt(7*Math.random()) + 1 + "天前"
data_container.appendChild(fake_name);
data_container.appendChild(fake_phone);
data_container.appendChild(fake_time);
return data_container;
}
//初始化显示框，比如你要轮播5条数据，那你就得准备6条
for (let i = 0; i < 6; i++)
show.appendChild(generate_data());
setInterval("show.appendChild(generate_data());", 1400);
setInterval(step, 1400);
function step() {
show.classList.add("should_scroll");
//700毫秒后取消should_scroll类，此时show这个元素会往下滚回来，但同时我们把show的第一个子div删除，所以看不出来
setTimeout('show.removeChild(show.childNodes[0]);show.classList.remove("should_scroll");', 700);
}
</script>
</body>
</html>
网友评论