js 文字搬运工

HTML 结构：

<div class="left">
    <p class="p1">携程旅行网是中国领先的在线旅行服务公司，向超过9000万会员提供酒店预订、酒店点评及特价酒店查询、机票预订、飞机票查询、时刻表、票价查询、航班查询、度假预订、商旅...</p>
    <span class="sp1"></span>
</div>
<div class="center">
    <a href="javascript:;" class="a1"></a>
    <a href="javascript:;" class="a2"></a>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<div class="right">
    <p class="p2"></p>
    <span class="sp2"></span>
</div>
    </div>

js

var p1 = document.getElementsByTagName('p')[0]; // 获取第一个段落元素
var p2 = document.getElementsByTagName('p')[1]; // 获取第二个段落元素
var sp = document.getElementsByTagName('span')[0]; // 获取第一个 span 元素
var sp2 = document.getElementsByTagName('span')[1]; // 获取第二个 span 元素
var a1 = document.getElementsByTagName('a')[0]; // 获取第一个链接元素
var a2 = document.getElementsByTagName('a')[1]; // 获取第二个链接元素
var li = document.getElementsByTagName('li'); // 获取所有列表项元素
var timer = null; // 定时器变量，用于实现文字滚动效果
var num = 0; // 列表项高亮显示的索引
var leng = p1.innerHTML.length; // 第一个段落的初始文本长度
var leng2 = p2.innerHTML.length; // 第二个段落的初始文本长度

a1.onclick = function () {
    // 每隔 10 毫秒执行一次滚动效果
    timer = setInterval(function () {
        var len = p1.innerHTML.length;
        var len2 = p2.innerHTML.length;
        if (len <= 0) {
            li[li.length - 1].style.background = ''; // 清除最后一个列表项的背景色
            clearTimeout(timer); // 清除定时器
        } else {
            // 清除所有列表项的背景色，然后高亮显示当前列表项
            for (var i = 0; i < li.length; i++) {
                li[i].style.background = '';
            }
            li[num].style.background = 'yellow';
            num++;
            num %= li.length; // 循环更新索引，确保不超出列表项数量
        }
        console.log(leng); // 输出第一个段落的初始文本长度
        p2.innerHTML += p1.innerHTML.charAt(); // 将第一个段落的第一个字符追加到第二个段落末尾
        p1.innerHTML = p1.innerHTML.substring(1); // 移除第一个段落的第一个字符
        sp.innerHTML = len + '/' + leng; // 更新字符计数信息
        sp2.innerHTML = len2; // 更新第二个段落的字符计数信息
    }, 10); // 设置定时器每隔 10 毫秒执行一次
};

sp.innerHTML = leng + '/' + leng; // 设置第一个段落的字符计数信息
sp2.innerHTML = leng2; // 设置第二个段落的字符计数信息

样式表 CSS：

* {
    padding: 0;
    margin: 0;
}

li {
    list-style: none;
}

.left {
    float: left;
    padding: 30px;
    width: 400px;
    height: 300px;
    border: 1px solid #000;
}

.center {
    float: left;
    margin: 0 30px;
}

.right {
    float: left;
    padding: 30px;
    width: 400px;
    height: 300px;
    border: 1px solid #000;
}

a {
    display: block;
    margin-top: 30px;
    width: 30px;
    height: 20px;
    background: red;
}

li {
    float: left;
    margin: 30px 0 0 10px;
    width: 5px;
    height: 5px;
    background: #666;
    border-radius: 50%;
}