字体移动

第一步当然是我们的CSS样式和HTML格式,都是一些简单的元素和样式,相信各位都懂得哈,我就不细说了。

 <div class="quan">
        <div id="left" class="left">
            中国很多民众都像我一样关注嫦娥五号的轨迹,同嫦娥五号一起遨游太空。我们对俄罗斯、欧洲等航天机构的美好祝愿表示感谢。嫦娥五号探测器12月1日成功在月球着陆并将开展后续工作。这是中国进行外空探索的历史性一步,也是国际合作与和平利用外空的历史性一步。
        </div>

第二步就是我们的JS代码了,其实也非常简单。

  1. 先获取元素,通过元素的innerText属性拿到文本。
  2. 通过for循环把得到的文本push到一个数组里面。
  3. 设置一个方法fn,在里面调用数组的splice方法。因为splice的返回值是删除的数组,所以把返回值接收到赋给另一个元素     splice(n,m,x)从索引n开始删除m个然后用x进行替换。
  4. 最后在点击方法里面写个定时器,每隔一秒让它调用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);
        }

实现这种效果的方法还有很多,有大神的话可以在下面评论出来哦。

上一篇:javascript中splice的使用方法有哪些?


下一篇:Js 数组删除元素、json删除元素