js实现一个一个出现一个一个消失

小灰灰 2022-01-30 02:25 215阅读 0赞

## 文字出现和消失 ##

.box1 {
                background-color: yellow;
                margin-bottom: 50px;
            }
    
            .box2 {
                background-color: yellowgreen;
            }

<div class="box1">《英雄联盟》(简称LOL)是由美国拳头游戏(Riot Games)开发、中国大陆地区腾讯游戏代理运营的英雄对战MOBA竞技网游。
            游戏里拥有数百个个性英雄，并拥有排位系统、符文系统等特色养成系统。
            《英雄联盟》还致力于推动全球电子竞技的发展，除了联动各赛区发展职业联赛、打造电竞体系之外，每年还会举办“季中冠军赛”“全球总决赛”“All
            Star全明星赛”三大世界级赛事，获得了亿万玩家的喜爱，形成了自己独有的电子竞技文化。 [1]
            英雄联盟是一款多人竞技类游戏，于2018年加入亚运会。
        </div>
        <div class="box2"></div>

var a = document.getElementsByClassName('box1')[0];
        var b = document.getElementsByClassName('box2')[0];
    
        timer = setInterval(function () {
        	//.substring(0, 1);一直在去获取文本中第一个字符串
        	//.substring(0, 1);  只包含第一个下标  不包含第二个下标的字符
        	b.innerHTML = b.innerHTML + a.innerHTML.substring(0, 1);
           // b.innerHTML += a.innerHTML.substring(0, 1);
            //一直来获取除了第一个字符往后的所有的字符
            a.innerHTML = a.innerHTML.substring(1);
            if (b.innerHTML == '') {
                clearInterval(timer);
            }
        }, 200)

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]: /images/20220130/481ee9a4f9714d03b4df9b75b8dc0c03.png