第一步当然是我们的CSS样式和HTML格式,都是一些简单的元素和样式,相信各位都懂得哈,我就不细说了。
<div class="quan">
<div id="left" class="left">
中国很多民众都像我一样关注嫦娥五号的轨迹,同嫦娥五号一起遨游太空。我们对俄罗斯、欧洲等航天机构的美好祝愿表示感谢。嫦娥五号探测器12月1日成功在月球着陆并将开展后续工作。这是中国进行外空探索的历史性一步,也是国际合作与和平利用外空的历史性一步。
</div>
第二步就是我们的JS代码了,其实也非常简单。
- 先获取元素,通过元素的innerText属性拿到文本。
- 通过for循环把得到的文本push到一个数组里面。
- 设置一个方法fn,在里面调用数组的splice方法。因为splice的返回值是删除的数组,所以把返回值接收到赋给另一个元素 splice(n,m,x)从索引n开始删除m个然后用x进行替换。
- 最后在点击方法里面写个定时器,每隔一秒让它调用fn函数一次。就间接的实现动态效果。
let left = document.getElementById('left');
let right = document.getElementById('right');
let btn = document.getElementById('btn');
let strs = left.innerText;
let ary = [];
for (let i = 0; i < strs.length; i++) {
ary.push(strs[i]);
}
function fn() {
let s = ary.splice(0, 1);
left.innerText = ary;
right.innerText += s;
}
btn.onclick = function () {
setInterval(() => {
fn();
}, 500);
}
实现这种效果的方法还有很多,有大神的话可以在下面评论出来哦。