ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

JavaScript 实现打字效果

2022-06-21 16:05:27  阅读:46  来源: 互联网

标签:index 效果 text JavaScript 打字 innerHTML let str typing



function typing(that)
{
    that = typeof(that.length) == 'undefined' ? [that] : that;

    for(var i = 0; i < that.length; i ++)
    {
        let text = that[i];
        let str = text.innerHTML;
        let index = 0;
        text.innerHTML = '';

        let timer = setInterval(function()
        {
            var current = str.substr(index, 1);
            if(current == '<')
            {
                index = str.indexOf('>', index) + 1;
            }
            else
            {
                index ++ ;
            }

            text.innerHTML = str.substring(0, index) + (index & 1 ? '_': '');

            if(index >= str.length)
            {
                text.innerHTML = str.substring(0, index);
                clearInterval(timer);
            }
        }, 40);
    }
}

typing(document.getElementsByClassName('words1'));
typing(document.getElementById('words2'));

 

标签:index,效果,text,JavaScript,打字,innerHTML,let,str,typing
来源: https://www.cnblogs.com/XiaoMingBlingBling/p/16397113.html

专注分享技术,共同学习,共同进步。侵权联系[[email protected]]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有